android版本微信浏览器不支持css media属性如何解决? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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版却不能执行。

展开
收起
杨冬芳 2016-06-06 09:45:26 2625 0
1 条回答
写回答
取消 提交回答
  • 杨冬芳
    IT从业

    自己搜索了一下,我改为用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>
    2019-07-17 19:27:39
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
From Java/Android to Swift iOS
立即下载
Android插件化-从入门到"放弃"
立即下载