为什么“宽度=设备宽度”完全不起作用？答案

【问题标题】：Why is "width=device-width" totally not working?为什么“宽度=设备宽度”完全不起作用？
【发布时间】：2019-06-08 09:42:27
【问题描述】：

我在设备上设置媒体查询时遇到问题。它根本不起作用。它像正常宽度一样工作。这是为什么呢？

<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">

这就是我使用它的方式：

@media only screen and (min-width: 600px) {
    background-color: lightblue;
}

【问题讨论】：

【解决方案1】：

这很简单。您没有将background-color: lightblue; 放入标签中它应该在 html 或 body 标签中。

您还应该将元标记更新为

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

您的代码应如下所示：

html{
  background-color:red;
}
@media only screen and (min-width: 600px) {
  html{
    background-color: lightblue;
    }
}

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

如果您希望网页在小于 600 像素时变为浅蓝色，则应交换两种颜色

有关更多信息，您可以转到w3schools，他们非常清楚地解释了媒体查询。

【讨论】：

我这样做了，它影响了移动设备。我的意思是每个移动设备都有这种浅蓝色，这很奇怪。
那你想达到什么目的？
因为它们变成浅蓝色很好，这意味着它们大于 600 像素，如果它们小于 600 像素，页面将变为红色
我正在尝试在每台大于 600 像素的设备上更改颜色，但它会影响每台移动设备，即使是那些宽度小于 600 像素的设备。
我总是做两个meta这样的标签<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">