Javascript js/jQuery 可以确定 iPhone 的方向吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2323281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can js/jQuery determine the orientation of the iPhone?
提问by David says reinstate Monica
Out of curiosity I've been playing with jQuery to determine the browser's screen size, and it occurred to me that screen size could be used to determine whether or not a visitor was using an iPhone/iTouch to view the site.
出于好奇，我一直在使用 jQuery 来确定浏览器的屏幕尺寸，我突然想到屏幕尺寸可用于确定访问者是否使用 iPhone/iTouch 查看网站。
So I used the following to test this:
所以我使用以下内容来测试：
$(document).ready(
function() {
var screenX = screen.width,
screenY = screen.height;
alert("X: " + screenX + " Y: " + screenY);
if (screenX == 320 && screenY == 396) {
$('div#wrap').css('background-color','#f00');
}
else if (screenY == 320 && screenX == 396) {
$('div#wrap').css('background-color','#0f0');
}
}
);
On viewing the page via iPhone, I notice that the dimensions are consistently (regardless of orientation):
在通过 iPhone 查看页面时，我注意到尺寸是一致的（无论方向如何）：
x: 320, y: 396
x: 320, y: 396
This is regardless of orientation. I haven't, as yet, attempted to use an onChangeevent to detect changes (mainly because I'm still so new at jQuery), but I wondered if there was a way to determine, via jQuery or plain javascript, the iPhone/iTouch's orientation?
这与方向无关。我还没有尝试使用onChange事件来检测更改（主要是因为我对 jQuery 还是很陌生），但我想知道是否有办法通过 jQuery 或普通的 javascript 来确定 iPhone/iTouch 的方向？
回答by typeoneerror
window.orientationwill give you an integer that denotes the rotation. You can listen for orientation changes by adding an event to the body:
window.orientation会给你一个表示旋转的整数。您可以通过向主体添加事件来侦听方向更改：
<body onorientationchange="updateOrientation();">
Just on the off-chance that the link dies or gets moved at some point:
只是在链接消失或在某些时候移动的可能性很小：
Value | Description
-------+-------------------------------------------------------------------------------
0 | Portrait orientation. This is the default value.
-90 | Landscape orientation with the screen turned clockwise.
90 | Landscape orientation with the screen turned counterclockwise.
180 | Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone.
回答by Pawel Dubiel
jQuery(window).bind('orientationchange', function(e) {
switch ( window.orientation ) {
case 0:
alert('portrait mode');
break;
case 90:
alert('landscape mode screen turned to the left');
break;
case -90:
alert('landscape mode screen turned to the right');
break;
}
});
edit:
编辑：
While this is OK for the iPhone it may not work correctly in other devices.
虽然这对 iPhone 没问题，但在其他设备上可能无法正常工作。
I would like to add some info I found at http://phoboslab.org/log/2012/06/x-type-making-of
我想添加一些我在http://phoboslab.org/log/2012/06/x-type-making-of 上找到的信息
And his example is more cross browser/device compatible.
他的例子更兼容跨浏览器/设备。
Mobile Safari and Chrome both support the orientationchange event, which makes this easy. However, we can not rely on window.orientation, which reports the rotation in degrees (0, 90, 180 or 270), because some devices report 0° for portrait mode, while others report 0° for landscape. How convenient!
The solution is to just check if the window height is bigger than the width – if so, we're obviously in portrait mode! But as this would be too easy, Chrome's Browser offers another challenge for us: it only updates the window dimensions after it has fired the orientationchange event. So we listen for orientationchange and resize events. Sigh.
Mobile Safari 和 Chrome 都支持orientationchange 事件，这使得这很容易。但是，我们不能依赖 window.orientation，它以度数（0、90、180 或 270）报告旋转，因为有些设备报告纵向模式为 0°，而其他设备报告横向模式为 0°。多么方便！
解决方案是检查窗口高度是否大于宽度 - 如果是，我们显然处于纵向模式！但由于这太简单了，Chrome 浏览器为我们提供了另一个挑战：它仅在触发orientationchange 事件后才更新窗口尺寸。所以我们监听orientationchange 和resize 事件。叹。
var wasPortrait = -1;
var checkOrientation = function() {
var isPortrait = (window.innerHeight > window.innerWidth);
if( isPortrait === wasPortrait ) { return; // Nothing to do here }
wasPortrait = isPortrait;
// Do your stuff...
};
window.addEventListener( 'orientationchange', checkOrientation, false );
window.addEventListener( 'resize', checkOrientation, false );
回答by Randal Schwartz
See "Handling Orientation Events" of https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
参见https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1 的“处理方向事件”
回答by Paulius
Mobile PHONES / TABLETS ONLY
仅限手机/平板电脑
switch ( window.orientation ) {
case 0:
alert('portrait mode');
break;
case 90:
alert('landscape mode screen turned to the left');
break;
case -90:
alert('landscape mode screen turned to the right');
break;
}
This only work for phones and tablets! Basic orientation (case 0) differs between tablets. Samsung case 0 is landscape, iPad case 0 is portrait.
这仅适用于手机和平板电脑！平板电脑之间的基本方向（案例 0）不同。三星外壳 0 是横向，iPad 外壳 0 是纵向。
回答by ABBDVD
I tried a similar approach for tablets cross-platform using .height() and .width() and then comparing which is larger. It works in iOS5 (tested on Ipad2) and the BlackBerry Rim but appearently not on Android (3.2 and 4.0.3). On Android the first time loading the site it gives me the right height and width but then changing the screen orientation it is always one step behind.
Ex. using the dimensions 800x1200 starting in portrait mode:
h:1200 w: 800 (portrait)
h:1200 w: 800 (landscape)
h:800 w: 1200 (portrait)
h: 1200 w: 800 (landscape)
Looking on I tripped over this solution with CSS3:
How to use javascript conditionally like CSS3 media queries, orientation?
This is probably better than tweaking the Js solution.
我使用 .height() 和 .width() 为平板电脑跨平台尝试了类似的方法，然后比较哪个更大。它适用于 iOS5（在 Ipad2 上测试）和 BlackBerry Rim，但似乎不适用于 Android（3.2 和 4.0.3）。在 Android 上，第一次加载网站时，它给了我正确的高度和宽度，但更改屏幕方向后，它总是落后一步。
前任。使用尺寸 800x1200 从纵向模式开始：
h:1200 w: 800 (portrait)
h:1200 w: 800 (landscape)
h:800 w: 1200 (portrait)
h: 1200 w: 800 (landscape)
看着我被绊倒了这个带有 CSS3 的解决方案：
如何像 CSS3 媒体查询、方向一样有条件地使用 javascript？
这可能比调整 Js 解决方案更好。
