一段非常实用的javascript - 移动端自适应(兼容ios和android)

偶然发现,不敢独享,与大家分享之


    <!--移动端版本兼容 -->
    <script type="text/javascript">
        var mengvalue = -1;
        //if(mengvalue<0){mengvalue=0;}
        var phoneWidth = parseInt(window.screen.width);
        var phoneScale = phoneWidth / 640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)) {
            var version = parseFloat(RegExp.$1);
            // andriod 2.3
            if (version > 2.3) {
                document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
                // andriod 2.3以上
            } else {
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
            // 其他系统
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script><meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
    <!--移动端版本兼容 end -->

原理很简单,根据设备尺寸动态在dom里设置viewport

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
已有 12 条评论
  1. 阿宝

    可以讲解一下为什么这样写吗?

    阿宝 回复
  2. FB总司令

    android2.3 之前不支持 缩放的,2.3 之后的版本才支持,640 这个其实是你设计的 h5 页面默认宽度,比较主流嘛,这个你也可以自定义,ios的话尺寸相对固定,就不允许缩放了,准备好@2x 的图片资源即可,iphone6+准备好 @3x 的图片

    FB总司令 回复
  3. 嘻嘻

    兼容性怎么样,有没有遇到什么坑么?我像看看

    嘻嘻 回复
    1. FB总司令

      @嘻嘻

      你试试就知道,之前我试过没有问题的

      FB总司令 回复
  4. 依生

    用了以后 底部超出的页面 没办法 往下滑动 是什么原因

    依生 回复
    1. FB总司令

      @依生

      什么系统,什么 版本

      FB总司令 回复
      1. 依生

        @FB总司令

        用谷歌浏览器 手机预览的情况下, 拖不下去看。 可以加个QQ指导下吗?

        依生 回复
发表新评论