html - css max-width 如何在移动设备上工作？

Question

我在这里有点困惑 - 我有以下 CSS 样式：

@media (max-width: 855px) {
    #page {
        //declarations
    }
}

这在我的桌面上可以正常工作，当我调整窗口大小时，浏览器会设置样式，因为它是声明的。但是我似乎无法让它在移动设备上运行。在 iphone 4 上进行测试，布局设置不正确。我假设如果 iphone 的显示屏是 640 x 960 像素，它会正常工作。我错过了什么？

Answer 1

尝试将此添加到您的 head 标签中：

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

Answer 2

"viewport"使用before</head>标签确保您的元数据

并在您的 CSS 中添加媒体查询

@media（最大宽度：YOUR_WIDTH_VALUE）{

}