寬度100％不適用於iOS

Question

由於某些原因，在iPhone上，我的頁腳不能在屏幕上伸展，即使它的css被設置爲寬度：100％。您可以查看我的頁腳問題在這裏的一個例子：http://pixelcakecreative.com/tla2/

我的頁腳CSS如下：

#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;} 

此問題僅適用於iOS設備，如佈局工作在PC瀏覽器的罰款。任何想法如何解決這個問題？我嘗試了所有我能想到的。謝謝！

Answer 1

嘗試：

<meta name="viewport" content="width=device-width,initial-scale=1" /> 

比我通常所知道的屬性要少，但我知道它已經適用於我的移動項目。

現在，經過仔細檢查，如果您的網站處於「中心」之下，那麼大部分網站都是包裝和頁腳。

用於包裝和頁腳的代碼是不同的。包裝有固定的width:941px;而頁腳只有width:100%。包裝器中的大多數元素都有width:100%，但這隻適用於包裝器具有width: 941px。

所以，你要麼嘗試添加相同的寬度和填充到頁腳沿着這些線路{width:941px; padding:30px 34px;}，要麼就是

你把頁腳類似的包裝內有固定，填充等，然後讓讓頁腳保持width:100%;

Answer 2

你可能會錯過移動視窗meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

這是必要的，以便移動設備例如iOS的頁面適當擴展到視口。你可以read about it here或here。

Answer 3

嘗試保留初始縮放和最大空白並使用user-scrollable = no。前兩個在我們的響應式設計項目中遇到同樣的錯誤。我還沒有弄明白爲什麼。

Answer 4

您div#innerFooter阻止頁腳比例適當，調整幅度爲100％，並應通過簡化您的META NAME視（至少適用於iOS）以下行修復

#innerFooter {width:100%}