角点检测判断物体移动方向_检测移动设备上的方向变化

角点检测判断物体移动方向

Unless your mobile application allows for only portrait or only landscape views, there's a good chance you will need to adjust a few things. Even if you've built your layouts in a fluid fashion, you may need to programmatically make some changes. There are a few strategies for knowing when pages have changed, so let's check out how we can detect orientation changes on mobile devices.

除非您的移动应用程序仅允许纵向或横向视图，否则您很有可能需要调整一些内容。 即使您以流畅的方式构建布局，也可能需要以编程方式进行一些更改。 有几种策略可以知道页面何时更改，因此让我们来看看如何在移动设备上检测方向变化。

方向改变事件 (orientationchange Event)

This method is what you would expect from a mobile API; a simple orientationchange event on the window:

这是您希望通过移动API获得的方法。 窗口上的一个简单的directionchange事件：

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
	// Announce the new orientation number
	alert(screen.orientation);
}, false);

During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.

在这些更改期间， window.orientation属性可能会更改。 值0表示纵向视图，-90表示设备横向旋转到右侧，而90表示设备横向旋转到左侧。

调整大小事件 (resize Event)

Some devices haven't provided the orientationchange event, but do fire the window's resize event:

某些设备尚未提供orientationchange事件，但会触发窗口的resize事件：

// Listen for resize changes
window.addEventListener("resize", function() {
	// Get screen size (inner/outerWidth, inner/outerHeight)
	
}, false);

A bit less obvious than the orientationchange event, but works very well.

不及orientationchange事件那么明显，但效果很好。

屏幕尺寸 (Screen Sizing)

There are a few properties you can retrieve from the window object to get screen size and what I consider "virtual" screen size:

您可以从窗口对象中检索一些属性，以获取屏幕尺寸以及我认为的“虚拟”屏幕尺寸：

• outerWidth, outerHeight: the real pixel real estate

  outerWidth ， outerHeight ：实际像素空间

• innerWidth, innerHeight: the virtual pixel real estate

  innerWidth ， innerHeight ：虚拟像素空间

These don't give you the orientation, of course, but using some simple math, you can find out if the window is currently wider or taller.

当然，这些没有给您方向，但是使用一些简单的数学运算，您可以确定窗口当前是更宽还是更高。

媒体查询 (Media Queries)

We can identify orientation by CSS media queries as well:

我们还可以通过CSS媒体查询来确定方向：

/* portrait */
@media screen and (orientation:portrait) {
	/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
}

If you'd like to get clever, you can code a periodical "watcher" with JavaScript to check the background color of a block and fire your own orientation change.

如果您想变得聪明一点，可以使用JavaScript编写定期的“观察者”代码，以检查块的背景颜色并触发自己的方向更改。

matchMedia (matchMedia)

The native window.matchMedia method allows for live media-querying. We can use the media queries above to find out if we're in portrait or landscape view:

本机window.matchMedia方法允许实时媒体查询。 我们可以使用上面的媒体查询来确定我们处于纵向还是横向视图：

// Find matches
var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
	// Portrait orientation
} else {  
	// Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
	if(m.matches) {
		// Changed to portrait
	}
	else {
		// Changed to landscape
	}
});

So there are a few ideas and options for you. I'd love to hear any more practical techniques you've used!

因此，有一些想法和选择适合您。 我很想听听您使用的更多实用技巧！

翻译自: https://davidwalsh.name/orientation-change

角点检测判断物体移动方向