iphone - 响应式问题：响应式在 iphone 中无法正常工作

Question

在完成对@media screen and (max-width:320px){ code } 和 @media screen and (max-width:480px){ code } 的响应后，该设计在 pc 浏览器中完美运行，但设计看起来很小，对于 320 像素，它在 iphone 肖像的左侧屏幕上显示 160。

Answer 1

在你的头标签中添加以下元标签

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

还有更多 Internet Explorer 8 或更早版本不支持媒体查询。您可以使用 media-queries.js 或 respond.js 在 IE 中添加媒体查询支持。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Answer 2

@user2582867：请使用以下代码：

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px) {

#container { width: 310px!important; }
#menu { float: none!important; padding-left: 10px!important; padding-right: 10px!important; text-align: center!important; width: 290px!important; }
#menu { float: none!important; padding-left: 10px!important; padding-right: 10px!important; text-align: center!important; width: 290px!important; } 
.columns { background: none repeat scroll 0 0 transparent!important; padding-left: 5px!important; padding-right: 5px!important; } 
.columns > .content { float: left!important; margin-left: 15px!important; width: 280px!important; }
}