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

确保meta viewport tag设置为width = device-width：

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

Answer 2

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

在浏览器中测试您的代码，方法是在我的笔记本电脑上缩小代码而不使用“设备 - ”。

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

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

@media对我不起作用

2 个答案: