javascript - 使用JavaScript检测浏览器中Android手机的旋转(Detect rotation of Android phone in the browser with JavaScript)

Question

I know that in Safari on an iPhone you can detect the screen's orientation and change of orientation by listening for the onorientationchange event and querying window.orientation for the angle.(我知道在iPhone上的Safari中，你可以通过监听onorientationchange事件和查询window.orientation来检测屏幕的方向和方向的变化。)

Is this possible in the browser on Android phones?(这可能在Android手机上的浏览器中出现吗？) To be clear, I am asking whether the rotation of an Android device can be detected by JavaScript running on a standard web page.(为了清楚起见，我问的是，在标准网页上运行的JavaScript是否可以检测到Android设备的旋转。) It is possible on an iPhone, and I wondered whether it could be done for Android phones.(这可能在iPhone上，我想知道是否可以为Android手机完成。)   ask by philnash translate from so

Answer 1

The actual behavior across different devices is inconsistent .(跨不同设备的实际行为是不一致的 。)

The resize and orientationChange events can fire in a different sequence with varying frequency.(resize和orientationChange事件可以以不同的频率以不同的顺序触发。) Also, some values (eg screen.width and window.orientation) don't always change when you expect.(此外，某些值（例如screen.width和window.orientation）并不总是在您预期时更改。) Avoid screen.width -- it doesn't change when rotating in iOS.(避免使用screen.width - 在iOS中旋转时不会改变。) The reliable approach is to listen to both resize and orientationChange events (with some polling as a safety catch), and you'll eventually get a valid value for the orientation.(可靠的方法是监听resize和orientationChange事件 （将一些轮询作为安全捕获），并且最终将获得有效的方向值。) In my testing, Android devices occasionally fail to fire events when rotating a full 180 degrees, so I've also included a setInterval to poll the orientation.(在我的测试中，Android设备偶尔无法在旋转180度时触发事件，所以我还包括一个setInterval来轮询方向。) var previousOrientation = window.orientation; var checkOrientation = function(){ if(window.orientation !== previousOrientation){ previousOrientation = window.orientation; // orientation changed, do your magic here } }; window.addEventListener("resize", checkOrientation, false); window.addEventListener("orientationchange", checkOrientation, false); // (optional) Android doesn't always fire orientationChange on 180 degree turns setInterval(checkOrientation, 2000); Here are the results from the four devices that I've tested (sorry for the ASCII table, but it seemed like the easiest way to present the results).(以下是我测试的四个设备的结果（对于ASCII表感到遗憾，但它似乎是呈现结果的最简单方法）。) Aside from the consistency between the iOS devices, there is a lot of variety across devices.(除了iOS设备之间的一致性之外，各种设备之间存在很多种类。) NOTE: The events are listed in the order that they fired.(注意：事件按其触发的顺序列出。) |==============================================================================| | Device | Events Fired | orientation | innerWidth | screen.width | |==============================================================================| | iPad 2 | resize | 0 | 1024 | 768 | | (to landscape) | orientationchange | 90 | 1024 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPad 2 | resize | 90 | 768 | 768 | | (to portrait) | orientationchange | 0 | 768 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 0 | 480 | 320 | | (to landscape) | orientationchange | 90 | 480 | 320 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 90 | 320 | 320 | | (to portrait) | orientationchange | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 90 | 320 | 320 | | (to landscape) | resize | 90 | 569 | 569 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 0 | 569 | 569 | | (to portrait) | resize | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 0 | 400 | 400 | | Tablet | orientationchange | 90 | 400 | 400 | | (to landscape) | orientationchange | 90 | 400 | 400 | | | resize | 90 | 683 | 683 | | | orientationchange | 90 | 683 | 683 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 90 | 683 | 683 | | Tablet | orientationchange | 0 | 683 | 683 | | (to portrait) | orientationchange | 0 | 683 | 683 | | | resize | 0 | 400 | 400 | | | orientationchange | 0 | 400 | 400 | |----------------+-------------------+-------------+------------+--------------|