为什么我的CSS3媒体查询在移动设备上不起作用？

Question

为什么我的CSS3媒体查询在移动设备上不起作用？

250

在 styles.css 文件中，我使用了媒体查询，其中两个使用了以下变体：

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

在常规浏览器（Safari、Firefox）中，当我缩小窗口时，网站会按照我想要的布局进行调整大小，然而，在手机上根本没有显示移动端的布局。相反，我只看到默认的CSS。

有人能指点一下我应该怎么做吗？

- redconservatory

3

什么手机？CSS中的媒体查询是一项新特性，不是所有移动电话浏览器都支持它。 - Sparky

1

iPhone 4，我还在一台安卓手机（2.2 Froyo）上进行测试，分辨率为320 x 480。 - redconservatory

实际上，我在 iPhone 4 上切换到了以下媒体查询，并且它可以正常工作（但我必须更改我的 CSS 来适应更高的分辨率）@media only screen and (-webkit-min-device-pixel-ratio: 2) { }。 - redconservatory

24个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaka Ruto · Answer 1

对我来说，我指定了max-height而不是max-width。

如果你也是这样，请去更改它！

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

- Christoph Thiede · Answer 2

在我的情况下，宽度值后面的px丢失了...有趣的是，W3C验证器甚至没有注意到这个错误，只是默默地忽略了这个定义。

- Paul Hanneforth · Answer 3

对于所有遇到相同问题的人，请确保您实际上写的是"120px"而不仅仅是"120"。这是我的错误，让我抓狂了。

- CamelBlues · Answer 4

我曾经遇到过同样的问题，后来发现我的媒体查询顺序错了。在CSS中，它们应该从最宽到最小进行定义。