在视口中设置width = device-width打破布局

Question

我有一个布局应该根据设备的宽度使用CSS中的@media查询进行缩放：

@media only screen and (max-width: 510px) {
    ....
}

虽然似乎应用了样式，但一旦视口设置为“width = device-width”，设计就会有效中断。可能是因为它太窄了，这很奇怪，因为CSS应该缩小所有内容。

检查下面的屏幕

快速编辑：似乎无论如何都能在Android 4.1上运行。

Answer 1

这只是iPhone的问题吗？可能是因为手机视网膜显示屏的双像素大小，请尝试将initial-scale=1.0; maximum-scale=1.0添加到视口内容中。