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

Question

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

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

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

这是我的 CSS 中的第一个媒体查询:文档的默认正文大小(在计算机上的网络浏览器上查看时)是 1200 像素。

@media screen and (min-width:481px) and (max-width:800px){
body {
width:800px;
}

.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}

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

编辑:

我还对我添加到原始帖子中的较小视口(viewport)尺寸进行了媒体查询。所以它应该在智能手机上启动，对吧？

@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-dont-do-this-in-responsive-web-development