为什么我的 CSS3 媒体查询在移动设备上不起作用? [英] Why are my CSS3 media queries not working on mobile devices?

问题描述

在styles.css中，我使用了媒体查询，两者都使用了:

In the styles.css, I am using media queries, both of which use a variation of:

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

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

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

当我缩小窗口时，网站会在常规浏览器(Safari、Firefox)中调整为我想要的布局，但是，手机上根本不显示移动布局.相反，我只看到默认的 CSS.

The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.

谁能指出我正确的方向?

Can anyone point me in the right direction?

推荐答案

所有这三个都是有用的提示，但看起来我需要添加一个元标记:

All three of these were helpful tips, but it looks like I needed to add a meta tag:

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

现在它似乎在 Android (2.2) 和 iPhone 上都可以正常工作...

Now it seems to work in both Android (2.2) and iPhone all right...

这篇关于为什么我的 CSS3 媒体查询在移动设备上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！