首頁猿問用JavaScript檢測Andr...

用JavaScript檢測Android手機在瀏覽器中的旋轉

JavaScript Android

犯罪嫌疑人X 2019-07-12 16:07:37

用JavaScript檢測Android手機在瀏覽器中的旋轉我知道在iPhone上的Safari中，您可以通過監(jiān)聽onorientationchange事件和查詢window.orientation為了這個角度。這在Android手機的瀏覽器中是可能的嗎？為了清楚起見，我想問的是，android設備的旋轉是否可以被JavaScript在標準網(wǎng)頁上運行。這在iPhone上是可能的，我想知道它是否可以用于Android手機。

查看完整描述

3 回答

忽然笑

TA貢獻1806條經(jīng)驗獲得超5個贊

實際不同設備之間的行為不一致。..調(diào)整大小和方向變化事件可以在不同的序列中以不同的頻率觸發(fā)。另外，某些值(例如屏幕寬度和窗口方向)并不總是在您期望的時候改變。避免屏幕寬度-在IOS中旋轉時，它不會改變。

可靠的方法是同時聽調(diào)整大小和方向變化的事件(使用一些輪詢作為安全捕獲)，您最終將獲得一個方向的有效值。在我的測試中，Android設備在旋轉180度時偶爾不能觸發(fā)事件，所以我還包括了一個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 turnssetInterval(checkOrientation, 2000);

下面是我測試過的四種設備的結果(很抱歉使用ASCII表，但這似乎是顯示結果的最簡單方法)。除了iOS設備之間的一致性之外，不同設備之間也有很多不同的地方。注意：事件按觸發(fā)順序列出。

|==============================================================================|
|     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          |
|----------------+-------------------+-------------+------------+--------------|

反對回復 2019-07-12

夢里花落0921

TA貢獻1772條經(jīng)驗獲得超6個贊

二位傻瓜的優(yōu)秀答案提供了所有的背景，但讓我嘗試一個關于如何處理IOS和Android中的方向變化的簡明、務實的摘要:

如果你只關心窗口尺寸(典型情景)
-而不是關于具體方向：

處理
resize
只有事件。
在你的處理程序中，采取行動
window.innerWidth
和
window.InnerHeight
只有。
不使用
window.orientation
-它不會在IOS上流行。

如果你真的關心特定取向:

手柄
只
這個
resize
事件發(fā)生在Android上，以及
只
這個
orientationchange
事件發(fā)生在IOS上。
在你的處理程序中，采取行動
window.orientation
(和
window.innerWidth
和
window.InnerHeight)