首页 > android版本微信浏览器不支持css media属性如何解决?

android版本微信浏览器不支持css media属性如何解决?

大家好,我们网站通过media属性判断用户是在移动端还是PC端登陆的。但是这种方法对于android版本微信却并不适用。大家有没有更好的方法?

css代码如下:

     @media screen and (max-device-width: 736px) {
            /* define mobile specific styles come here */
            #showInMobile {
                display:block;
            }

            #showInPC {
                display:none;
            }
        }

以上代码想实现移动端设备关闭ID为showInPC的DIV标签,而开启ID为showInMobile的DIV标签。这段代码在iphone版的微信正常执行(iphone版微信据说调用safari内核),但是android版却不能执行。


自己搜索了一下,我改为用javascript实现这个功能:

<body>
<div id="showInMobile">
<p>in mobile style</p>
</div>

<div id="showInPC">
<p> in pc mode</p>
</div>
<script>
    if(document.documentElement.clientWidth <= 736){
        document.getElementById("showInMObile").style.display = 'block';
        document.getElementById("showInPC").style.display = 'none';
    }else {
        document.getElementById("showInMobile").style.display = 'none';
        document.getElementById("showInPC").style.display = 'block';
    }
</script>
</body>

可以查一下android版的chrome webkit版本,现在同时存在533 和 537两种版本,有一些影响

【热门文章】
【热门文章】