Reponsive CSS iOS7不工作

Question

http://franquicia.dia.es/

我嘗試所有這些代碼，iPhone 4與iOS7：在iOS7

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

<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1" /> --> 
<!-- <meta name="viewport" content="initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> --> 
<!-- <meta name=」viewport」 content=」initial-scale=1″> --> 
<!-- <meta name="viewport" content="width=device-width; height=device-height;"> --> 
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> 
<!-- <meta name="viewport" content="minimum-scale=1, initial-scale=1"> --> 
<!-- <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, width=device-width" name="viewport" /> --> 
<!-- <meta name="viewport" content="initial-scale=1"> --> 
<!-- <meta name="viewport" content="initial-scale=1.0" /> --> 
<!-- <meta name="viewport" content="width=device-width"> --> 
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> --> 
<!-- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> --> 
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> --> 
<!-- <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> --> 
<!-- <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=yes" /> --> 
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> --> 
<!-- <meta name="viewport" content="initial-scale=2.3, user-scalable=no"> --> 
<!-- <meta name="viewport" content="width=device-width"> --> 
<!-- <meta name="viewport" content="width=device-width"> --> 
<!-- <meta name="viewport" content="maximum-scale=5.0, user-scalable=no"> --> 
<!-- <meta name = "viewport" content = "user-scalable=no, width=device-width"> --> 
<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/> --> 

沒有什麼變化，根本不工作。 爲什麼？

Answer 1

看着你的CSS視口不是你的問題。視口元標記僅僅告訴設備如何修改瀏覽器的顯示，但實際上並沒有改變你的任何網站。隨着響應式設計這些CSS屬性是你最好的朋友：

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
max-width: 100%; 

在你的CSS你告訴一些元素是320px的寬度，而不是限制它們的寬度。此外，box-sizing屬性通過使用寬度和填充以及邊框來指示元素的大小，這有助於解決溢出問題。

以下是添加最大寬度後您的網站的樣子：100％;到頁面上的一堆元素。