码迷,mamicode.com
首页 > 微信 > 详细

H5-viewport用法,阻止微信浏览器自带的双击放大和任意放大缩小

时间:2018-06-14 14:30:52      阅读:2488      评论:0      收藏:0      [点我收藏+]

标签:TE   width   http   agent   com   meta   name   bsp   class   

<meta name="viewport" content="width=100%,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

 页面统一加入

技术分享图片

移动端布局实例:

<head>
<title>Test Page</title>
<script>
    var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度
    var deviceScale = deviceWidth / 640;  //得到当前设备屏幕与640之间的比例,之后我们就可以将网页宽度固定为640px
    var ua = navigator.userAgent;
    //获取当前设备类型(安卓或苹果)
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write(‘<meta name="viewport" content="width=640,initial-scale=‘ + deviceScale + ‘, minimum-scale = ‘ + deviceScale + ‘, maximum-scale = ‘ + deviceScale + ‘, target-densitydpi=device-dpi">‘);
        } else {
            document.write(‘<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />‘);
        }
    } else {
        document.write(‘<meta name="viewport" content="width=640, user-scalable=no">‘);
    }
</script>
</head>

 

H5-viewport用法,阻止微信浏览器自带的双击放大和任意放大缩小

标签:TE   width   http   agent   com   meta   name   bsp   class   

原文地址:https://www.cnblogs.com/xcggdd/p/9182037.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!