媒体查询不适用于视口初始比例 0.25答案

【问题标题】：media query is not working with viewport initial-scale 0.25媒体查询不适用于视口初始比例 0.25
【发布时间】：2014-10-20 19:01:48
【问题描述】：

@media screen and (max-width: 480px){
.navPosFixed{position:inherit !important; border:red solid 1px;}

}

视口

<script>
if(navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/Windows Phone/i) 
        || navigator.userAgent.match(/webOS/i) 
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPod/i) 
        || navigator.userAgent.match(/BlackBerry/i) 
        || navigator.userAgent.match(/iemobile/i)) { 
        document.write('<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.25" />'); 
        }
</script>

虽然页面的初始比例为 1.0，但它工作得很好，但一旦更改为 0.25，它就会忽略媒体查询。我想缩小页面并想为移动设备运行媒体查询。

【问题讨论】：

肯定让页面“缩小”和“运行媒体查询”是反直觉的？
有什么解决办法吗？
拥有<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1"/> 并让您的媒体查询与它一起工作。我不明白您为什么要缩小页面并同时进行媒体查询？
使用缩小的原因是我们有几个页面无法响应移动设备，因为我们对所有网格都使用了 % 宽度以使其流畅。因此，在移动设备中，它破坏了布局。我想使用媒体查询来覆盖 CSS 属性以解决问题。
老实说听起来令人难以置信的复杂

标签： html css media-queries

【解决方案1】：

将初始比例设置为 0.25 后，视口宽度等于 480/0.25=1920。所以修改你的css代码如下：

@media screen and (max-width: 1920px){ .navPosFixed{position:inherit !important; border:red solid 1px;} }

顺便说一下，一些android浏览器在initial-scale不等于1的时候是不工作的。

【讨论】：