CSS在移动设备上如何使用max-width？

Question

我有点困惑了 - 我有一个带有以下内容的 CSS 样式：

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

这在我的桌面电脑上运作良好，当我调整窗口大小时，浏览器会按照声明设置样式。然而，在移动设备上似乎无法工作。在 iPhone 4 上测试时，布局没有正确设置。我以为如果 iPhone 的显示分辨率是 640 x 960 像素，那么它应该能正常工作。我错过了什么？

- Fygo

---

在桌面上，最大宽度应为855像素，在移动设备上，应填满屏幕100％。您有我们可以查看的链接吗？ - Rich

这是一个链接：http://www.pixelhood.com/fb/ 我本以为移动端的菜单项会以垂直布局呈现，但实际上并没有。 - Fygo

你提到的那个分辨率对于 iPhone 来说似乎有点高。 - Paulie_D

这与iPhone无关，但它也应该在iPhone上运行。 - Fygo

Answer 1

尝试将以下内容添加到您的 head 标签中：

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

- Rich

Answer 2

在</head>标签之前，确保您的元素使用"viewport"

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

@media (max-width: YOUR_WIDTH_VALUE) {
}

- Md Nurullah