如何禁用切換橫向/縱向移動網絡應用程序（Android瀏覽器/ iOS移動Safari）

我想禁用手機旋轉影響我的HTML5移動應用程序的網頁之一。沒有重新佈局，調整大小，orientationchange行爲。如何禁用切換橫向/縱向移動網絡應用程序（Android瀏覽器/ iOS移動Safari）

我希望它讓你旋轉手機和加載將保持不變，強迫使用者在原來的方向使用的應用程序的初始佈局。用戶邏輯有許多微妙之處，我真的覺得這是我的應用程序所需要的，所以請不要對該選擇發表評論，而是在第一句中幫助我解決問題。

我試着聆聽既有「orientationchange」和「調整大小」的活動，並呼籲的preventDefault和stopPropagation他們，以防止重組頁面打開時以適應橫向視圖的任何瀏覽器的行爲。那麼，顯然阻止任何（理想）。
```
window.addEventListener("orientationchange", function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
}, false); 

window.addEventListener("resize", function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
}, false); 
```

製造絕對沒有什麼區別。瀏覽器仍然重新組織Android上的頁面（包括2.1版本和之後）和iPhone 4-5。

試圖meta標籤

<meta name="viewport" content="initial-scale=1.0, user-scalable=no />

然後很生氣，試圖

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />

既發揮了作用。

瘋狂地看着StackOverflow，看到我在步驟1中做了什麼，放了幾次...再次嘗試，以確保我沒有搞砸的東西了。沒有工作。
吸入我的驕傲，於是決定繼續運行到磚牆由於驕傲，那時候真的吸入我的驕傲，在這裏公佈。

HALP。

來源

2011-11-16 SPillai

移動設備提供縮放和** **用戶，而不是開發者轉動。你爲什麼要刪除它？ – RobG

@RobG我覺得你很困惑。 – fancy

@RobG對不起，這不是重點。 – SPillai

-3

將Android：configChanges =「keyboardHidden | orientation」添加到您的AndroidManifest.xml中。這告訴系統你將要處理的配置變化 - 在這種情況下，什麼也不做。

來源

2011-11-16 03:27:54 sanraj

網絡應用程序，而不是本機應用程序。具體來說，應該有一個JavaScript解決方案，我錯過了 – SPillai

您無法在Web應用中禁用移動方向。當他們改變方向爲水平模型時，你可以做的是將頁面旋轉成肖像（使用來自JS的CSS旋轉）。通過這種方式，他們將被迫在肖像模式下使用您的Web應用程序。

您也可以向他們展示的消息（「肖像僅模式」，當他們嘗試在橫向模式下查看）

來源

2012-05-28 14:29:59 Hasanavi

我這樣做是使用下面的解決，它要求用戶切換回肖像模式。
一旦用戶切換回肖像模式，他將被允許與應用程序交互。

<head> 
<style type="text/css"> 
#landscape{ 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     background: #000000; 
     width: 100%; 
     height: 100%; 
     display: none; 
     z-index: 20000; 
     opacity: 0.9; 
     margin:0 auto; 
} 
#landscape div{ 

     color: #FFFFFF;         
     opacity: 1; 
     top: 50%; 
     position: absolute; 
     text-align: center; 
     display: inline-block; 
     width: 100%; 
} 
</style> 
<script>   
     function doOnOrientationChange() 
     { 
     switch(window.orientation) 
     { 
      case -90:     
       document.getElementById("landscape").style.display="block"; 
       break; 
      case 90:    
       document.getElementById("landscape").style.display="block";     
       break; 
     default:     
       document.getElementById("landscape").style.display="none"; 
       break;        
     } 
     } 

     //Listen to orientation change 
     window.addEventListener('orientationchange', doOnOrientationChange); 

    </script> 
</head> 
<body onload="doOnOrientationChange();"> 
<div id="landscape"><div>"Rotate Device to Portrait"</div></div> 
</body>

來源

2013-09-11 09:20:48 Anup

我認爲這是一個非常優雅的解決方案。只是我的意見:) –

window.orientation是不可靠的。 -90°可以在某些設備上顯示。方向0只是設備的_default_方向。 – Pierre

顯而易見的解決方案是使用JavaScript這樣的：

if(window.innerHeight > window.innerWidth){ 
    document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)"; 
}

當屏幕旋轉時，其旋轉右後衛。

來源

2014-05-06 21:16:14 invot

不應該是'if（window.innerHeight> window.innerWidth）document.getElementsByTagName（「body」）[0] .style.transform =「rotate（90deg）」; }' –

你確定這個功能嗎？ – Martian2049

@KunalDethe固定。謝謝！ – invot

保持簡短！：]

window.addEventListener('orientationchange', function() 
 
{ 
 
    if (window.innerHeight > window.innerWidth) 
 
    { 
 
     document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)"; 
 
    } 
 
});

來源

2015-05-11 20:27:31 tfont

你有一個小錯誤，應該是document.getElementsByTagName（'body'）[0] .style.transform =「rotate（90deg）」; – JackKalish

你是對的！謝謝。代碼已更新。 – tfont

如何禁用切換橫向/縱向移動網絡應用程序（Android瀏覽器/ iOS移動Safari）

回答

相關問題