html - 媒体查询不适用于视口(viewport)初始比例 0.25

Question

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

}

视口(viewport)

<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，视口(viewport)宽度就等于 480/0.25=1920。所以修改你的CSS代码如下:

@media screen and (max-width: 1920px){
.navPosFixed{position:inherit !important;边框:红色实心 1px；}


顺便说一下，当 initial-scale 不等于 1 时，某些 android 浏览器无法正常工作。