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％;到页面上的一堆元素。