Question

我正在开发一个专为iPhone 6 Plus及更小版本设计的移动响应网站。（目前为iPhone 6＆amp; 5）。

当通过Chrome浏览器使用“Inspect element”显示并设置我上面提到的设备时 - 它工作正常。

在真实手机上显示时，我只获得最小的宽度。

@media (max-width: 415px) {
...
}

@media (min-width :  320px) and (max-width : 375px ) {
...
}

@media (min-width :  240px) and (max-width : 320px ) {
...
}

我在HTML中使用了这两个：

<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />

我无法将所有代码粘贴到此处，我没有权限。

还有什么其他问题？有没有更好的方法来测试移动响应网站？因为看起来像在Chrome或像'screenfly'这样的网站上进行测试并不是那么可靠ץ

Answer 1

您的问题可能与min-width上的max-width和320px相同

所以，试试这个：

@media (min-width :  321px) and (max-width : 375px ) {
...
}

@media (min-width :  240px) and (max-width : 320px ) {
...
}

我的移动响应式网站始终显示最小的CSS宽度视图 - 可能导致此问题的原因是什么？

1 个答案: