媒体查询不适用于智能手机

Question

当我在浏览器上调整视口窗口的大小时，此媒体查询似乎有效，但是当我在智能手机上启动网站时，它看起来放大了。一旦我缩小它看起来不错，但是当它加载时它看起来放大了......所以我只能假设有些东西没有正确损坏。

这是我的元标记中的内容：

<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0">

这是我在CSS中的第一个媒体查询：文档的默认正文大小（在计算机上的Web浏览器上查看时）为1200px。

@media screen and (min-width:481px) and (max-width:800px){
body {
width:800px;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}

关于为什么这可能不起作用的任何想法？

编辑：

我

也有媒体查询较小的视口大小，我正在添加到我的原始帖子中。所以它应该在智能手机上启动，对吧？

@media only screen and (min-width:375px) and (max-width:667){
body {
width:480px;
margin: 0 auto;    
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
#logo {
color: white;
margin: 0 auto;
padding:0px;
text-transform:uppercase;
letter-spacing: 6px;
padding-top:110px;
font-size: 13px;
}

Answer 1

尝试使用：

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

而不是您的标签。

https://alwaystwisted.com/articles/2013-01-10-don-don-do-this-ing-web-development