html - @media 对我来说无法正常工作

Question

我有一个看起来像这样的 css 文件：

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-device-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}

当我从移动浏览器运行 html 时，它没有全屏显示，知道需要修改什么吗？我试过 Safari 和 Chrome，但似乎都没有在移动设备上应用更改。

Answer 1

确保元视口标签设置为 width=device-width：

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

Answer 2

我唯一能想到的是，您正在测试的设备实际上有一个大于 480 像素的屏幕。

通过在没有“设备”的情况下在我的笔记本电脑上缩小代码来在浏览器中测试您的代码。

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}