視口設置導致移動Safari中的旋轉問題

Question

首先，這不是我在其他問題中看到的縮放問題。另外，我正在使用運行iOS 6的iPhone 4測試此功能。在開展移動項目時，我發現viewport標記和移動Safari瀏覽器存在問題。我盡我所能地將所有東西都編譯成代碼。我已經有參數設置：

• 寬度=設備寬度
• 高度=設備高度
• 初始規模= 1.0
• 最大規模= 1.0
• 用戶可擴展=無

它一切正常，直到你旋轉屏幕。沒有任何東西會被調整大小，右側會出現一個黑色條以填補空白（見截圖）。如果我完全刪除height=device-height，問題就會消失。但是，我確實需要使用此參數。否則，我將不得不問一個不同的問題。

旋轉回肖像模式後，該黑條仍然存在，我可以左右滾動。這是一個很奇怪的問題。刪除width=device-width做別的意外。我有代碼在這裏，如果你想嘗試一下：http://toastd.net/viewport.html

下面是一些截圖：

這是工作的罰款在人像模式：

當旋轉爲橫向模式

然後轉回肖像模式

Answer 1

我相信這是Safari上的一個bug，但我想出了一個方法來解決它。它與某些元素和他們的風格有關。通過淘汰的過程，我將其縮小到幾個「冒犯」的HTML元素。從某些元素和CSS樣式中刪除width: 100%;，以及其他靜態寬度，如width: 120px;將開始出現縮減問題。我說「開始減少」，因爲右邊的邊界變小了，但並沒有完全消失。然後我開始玩其他CSS屬性，如邊距和填充。從某些元素中刪除了一些左右填充後，問題終於消失了。但這並不是真的可以接受，因爲那些風格是有原因的。

解決方案是將所有內容都包裝在一個容器元素中，大小適當，並在CSS中設置爲overflow: hidden;。將overflow: hidden;設置爲body或html標籤也可以工作，但在移動Safari中使用垂直滾動做了一些時髦的事情。就我而言，已經有了這樣一個容器元素，所以我所要做的就是將overflow屬性添加到它。

就像我說的，我認爲這是Safari中的一個錯誤。當您從橫向旋轉到縱向時，所有東西都應調整大小以適應縱向模式。從視覺上來說，一切看起來像是正確調整大小。然而，Safari必須想到的東西沒有正確調整大小，所以它顯示的頁面比實際更寬。這在Android設備上的Chrome中運行得很好。我還添加了不同的背景顏色和邊框，以突出顯示哪些元素可能會導致頁面超出設備屏幕寬度。在視覺上，沒有明顯的罪魁禍首。

如果你認爲這可能是一個width: 100%加padding問題，我有同樣的想法。但是，單獨刪除寬度或邊距/填充應該可以解決問題，但事實並非如此。沒有一個元素坐在屏幕邊緣之外。那裏空無一人，只剩下空間。

Answer 2

釷元標記將幫助定義視口的規則，但您仍然需要應用視覺樣式來解決方向的變化。給這些CSS值一試：

body { width: 100%; height: 100%; } 

如果你想一個很好的資源，以幫助繼續你的項目，擁有的PhoneGap在GitHub上的啓動應用程序，你可以派生。
PhoneGap Start