响应式CSS iOS 7无法正常工作

Question

http://franquicia.dia.es/

我尝试了所有这些代码，iPhone 4和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"/> -->

iOS7没有任何变化，根本没有工作。 为什么呢？

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属性使用宽度和填充以及边框来告诉元素大小，这有助于解决溢出问题。

添加max-width后，以下是您的网站的样子：100％;到你网页上的一堆元素。