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

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

1 个答案: