标签：false max 兼容 pix imu 区域 数值 zha 分享
1 <script> 2 // 适用于750的设计稿 3 var iScale = 1; 4 // 通过页面加载的时候去获取用户设备的物理像素比 5 iScale = iScale / window.devicePixelRatio; 6 // 然后来设置html的<meta>表现的缩放属性，从而达到在任意页面实现页面布局的自适应的效果 7 document.write(‘<meta name="viewport" content="width=device-width,‘ + 8 ‘initial-scale=‘ + iScale + ‘,minimum-scale=‘ + iScale + ‘,maximum-scale=‘ + iScale + ‘,user-scalable=no" />‘) 9 // 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 10 var iWidth = document.documentElement.clientWidth; 11 // 设置页面基础的字体大小 12 document.getElementsByTagName(‘html‘)[0].style.fontSize = iWidth / 15 + ‘px‘; 13 </script>
WebSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放,一般的安卓的app的开发者都会默认禁止这条属性；说是会对其他的东西有影响。那么这样的话，就不能够实现任意比例的缩放了，也当然达不到我们想要的结果。1 <script> 2 var docEl = document.documentElement, 3 //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， 4 //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 5 //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值 6 resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, 7 recalc = function () { 8 //设置根字体大小1:50适用于375的设计稿，需要变更，就更改基础字体的数值 9 docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + ‘px‘; 10 }; 11 12 //绑定浏览器缩放与加载时间 13 window.addEventListener(resizeEvt, recalc, false); 14 document.addEventListener(‘DOMContentLoaded‘, recalc, false); 15 </script>
第二个方案相比第一个方案来说有两个有点。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">这样就可以了。这样就避免了在app中安卓禁止页面任意比例缩放后，页面不能自适应的这个bug。给大家上一个小的demo希望给大家一些直观的感受，不要问为什么不给链接！
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> 6 <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 7 <meta HTTP-EQUIV="Expires" CONTENT="0"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8"> 9 <title>我姓李名乾坤</title> 10 <script type="text/javascript"> 11 var docEl = document.documentElement, 12 //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， 13 //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 14 //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值 15 resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, 16 recalc = function () { 17 //设置根字体大小 18 docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + ‘px‘; 19 }; 20 21 //绑定浏览器缩放与加载时间 22 window.addEventListener(resizeEvt, recalc, false); 23 document.addEventListener(‘DOMContentLoaded‘, recalc, false); 24 </script> 25 <style type="text/css"> 26 * { 27 margin: 0; 28 padding: 0; 29 } 30 31 ul, 32 li { 33 list-style: none; 34 background: white; 35 margin-top: .01rem; 36 } 37 38 html, 39 body { 40 font-family: "微软雅黑"; 41 width: 100%; 42 height: 100%; 43 background: #E9E9E9; 44 } 45 46 .left { 47 float: left; 48 } 49 50 .loan { 51 width: 7.2rem; 52 } 53 54 .loan>li { 55 width: 7.5rem; 56 height: 1.99rem; 57 border-bottom: 1px solid #E9E9E9; 58 } 59 60 .logoBox { 61 width: 1.45rem; 62 height: 1.57rem; 63 padding-left: .3rem; 64 padding-top: .4rem; 65 } 66 67 .logoBox>img { 68 width: 1.17rem; 69 height: 1.17rem; 70 } 71 72 .contentBox { 73 width: 4.5rem; 74 height: 1.17rem; 75 padding-top: .4rem; 76 } 77 78 .Name { 79 width: 4.5rem; 80 height: .5rem; 81 line-height: .5rem; 82 font-size: .3rem; 83 color: #333333; 84 } 85 86 .description { 87 width: 4.5rem; 88 height: .22rem; 89 line-height: .22rem; 90 font-size: .22rem; 91 color: #666666; 92 margin-bottom: .1rem; 93 } 94 95 .contentBox>span { 96 padding: .05rem .06rem; 97 font-size: .14rem; 98 line-height: .14rem; 99 color: #fc936d; 100 background: #fff4f0; 101 margin-right: .05rem; 102 } 103 104 .optBtn { 105 width: 1.1rem; 106 height: .4rem; 107 line-height: .4rem; 108 text-align: center; 109 background: #FFFFFF; 110 font-size: .22rem; 111 color: #fc936d; 112 margin-top: 1rem; 113 border-radius: .1rem; 114 } 115 </style> 116 </head> 117 118 <body> 119 <ul class="loan"> 120 <li id="paipaidai"> 121 <div class="logoBox left"> 122  123 </div> 124 <div class="contentBox left"> 125 <p class="Name">贴代码</p> 126 <p class="description">贴代码，贴代码</p> 127 <span class="left">贴代码</span> 128 <span class="left">贴代码</span> 129 <span class="left">贴代码</span> 130 </div> 131 <div class="optBtn left">喜欢代码</div> 132 </li> 133 <li id="paipaidai"> 134 <div class="logoBox left"> 135  136 </div> 137 <div class="contentBox left"> 138 <p class="Name">贴代码</p> 139 <p class="description">贴代码，贴代码</p> 140 <span class="left">贴代码</span> 141 <span class="left">贴代码</span> 142 <span class="left">贴代码</span> 143 </div> 144 <div class="optBtn left">喜欢代码</div> 145 </li> 146 <li id="paipaidai"> 147 <div class="logoBox left"> 148  149 </div> 150 <div class="contentBox left"> 151 <p class="Name">贴代码</p> 152 <p class="description">贴代码，贴代码</p> 153 <span class="left">贴代码</span> 154 <span class="left">贴代码</span> 155 <span class="left">贴代码</span> 156 </div> 157 <div class="optBtn left">喜欢代码</div> 158 </li> 159 </ul> 160 </body> 161 162 </html>
window.onload=function(){
var e=(document.documentElement.clientWidth>=640?640:document.documentElement.clientWidth)/320*12;
document.documentElement.clientHeight;document.getElementsByTagName("html")[0].style.fontSize=e+"px"
};
这种方案的的好处是它的rem和px比值在浏览器模拟机器上面的比值是1:12，其数值大小也同样是可以调整的，这样的做的好处就是，在安卓原生的app上面，即使app的开发者禁止了js的使用，也可以做到一个相对的自适应，效果要比前面的两个要好一点，但是缺点就是px和rem之间的换算有点麻烦。
不知道上面的分享有没有帮助到你，你要是问我有没有推荐的，我已经把适用的场景说的很明白了。你可以自己选择，我现在一般是用的第二种的。
希望能帮助到你们~如果有什么问题，请大家多多指出。
标签：false max 兼容 pix imu 区域 数值 zha 分享
原文地址：https://www.cnblogs.com/guwufeiyang/p/12992788.html
