媒体查询不适用于viewport initial-scale 0.25

Question

@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，它就会忽略媒体查询。 我想缩小页面并希望为移动设备运行媒体查询。

Answer 1

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

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

顺便说一下，当初始比例不等于1时，一些Android浏览器不起作用。