如何防止在移動Safari瀏覽器中改變方向後獲得更多寬度

在iPad上的移動Safari中，在更改設備方向後出現一些奇怪的行爲。這裏是我的測試文件：如何防止在移動Safari瀏覽器中改變方向後獲得更多寬度

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=0.7" /> 
     <style> 
      #block { 
       border: 1px solid red; 
       background-color: yellow; 
       font-size: 400%; 
       width: 700px; 
       height: 500px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="block">Hello world!</div> 
    </body> 
</html>

您可以通過以下網址在移動Safari瀏覽器中查看它：

http://fiddle.jshell.net/eterps/jsTqj/show/

當我去的URL以我的iPad在縱向方向，並提出一些滑動手勢該頁面不滾動，這是正確的。

但是，當我將設備旋轉到風景模式並進行一些輕掃手勢時，我沒有明顯的原因在右側獲得了額外的空間。

但即使更奇怪的是，當我重新啓動移動Safari瀏覽器並且始終處於橫向狀態時轉到URL時，右側的多餘空間不存在。

爲什麼右側的額外空間在方向改變後會出現？我該如何預防它？

來源

2011-03-08 Erik

當您旋轉設備時，移動Safari會調整視口大小以匹配新的方向。

來源

2011-03-17 09:45:24 Erik

移動Safari瀏覽器似乎試圖在屏幕中央保持視圖位置。您可以通過以下參數 window.outerWidth和window.scrollX進行檢查。在裝入頁面並更改方向縱向 - >橫向 - >縱向後，它們不同。

我覺得這個題目是與其他討論 Mobile site resize on orientation change not working in Safari

您可以通過下面的腳本

$(window).bind('orientationchange', function() { 
    var oldWidth = $('body').innerWidth(); 
    $('body').width(oldWidth + 1); // Force redraw 
    $('body').width(''); // Return to previous state in case if width set by css, otherwise use $('body').width(oldWidth); 
});

強制頁面和隱藏空白的重繪

來源

2013-09-18 20:53:24

如何防止在移動Safari瀏覽器中改變方向後獲得更多寬度

回答

相關問題