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

Question

我正在开发一个专为iPhone 6 Plus及更小尺寸设计的移动响应式网站。（目前为iPhone 6和5）。

当通过Chrome浏览器使用"检查元素"并设置我上面提到的设备时 - 它工作正常。

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

@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，并且在320px时max-width

所以，试试这个：

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