Meta觀點地獄

Question

我設計了一個響應式網站，並用Compass Susy構建了一個原型。

我在iPad和iPhone上的移動Safari上遇到的問題是，當我以縱向模式加載網站，然後旋轉到橫向時，整個佈局跳到右側30％（它也擴大了縮放以適應480px橫向寬度）。

我已經試過幾件事情，我注意到，從 <meta content="width=device-width, initial-scale=1" name="viewport">到 <meta content="width=device-width" name="viewport">改變中繼檢視區標記（除去初始規模）跳不會發生。

但是，沒有該屬性，我的手機佈局太小，即使在最初的肖像視圖。在兩個方向上，它都是平坦的，在右邊有一個水溝。

我試過放大Susy網格中的列，雖然它顯然使得佈局在其他平臺上變得更寬，但在手機上仍然放大以顯示右側的排水溝。所以這是某種視口問題。

在初始縮放比例設置下，在Android上它適合在旋轉到橫向時不跳躍，但保持320px（左右邊距）。

我需要在這裏做什麼？

Answer 1

試試這個：

<meta name="HandheldFriendly" content="True"> 
<meta name="MobileOptimized" content="320"> 
<meta name="viewport"   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

Answer 2

我會盡量不要太模糊，不知道如何HTML的結構設置...但是你可以嘗試以下步驟，讓我知道，如果它的作品：

1. 使用Lokase提供的代碼，但刪除「user-scalable = 0」部分。
2. 將所有內容都包裹在兩個空格中。第一個給出「id ='x'」，第二個給出「class ='resizer'」。最後不要忘記你的標籤。
3. 以下內容添加到您的樣式表： 格：則firstChild div.resizer { 寬度：100％ } ＃X {顯示：塊}

這應該加載文檔的視口的寬度，但還是給用戶可擴展性。

這是一種拙劣的工作，但它在我最近爲客戶做的移動網站上工作。