iphone - 在视口(viewport)中设置 width=device-width 会破坏布局

Question

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

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

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

检查下面的屏幕

快速编辑:似乎以某种方式在 Android 4.1 上工作。

Answer 1

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