rem在手机移动端app中的兼容适配问题
Posted 鼓舞飞扬
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem在手机移动端app中的兼容适配问题相关的知识，希望对你有一定的参考价值。
这是我之前一直使用的第一种rem方案。贴代码
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>
- 这段代码的意思就是，通过页面加载的时候去获取用户设备的物理像素比，然后来设置html的<meta>表现的缩放属性，从而达到在任意页面实现页面布局的自适应的效果，下面的设置页面基本字体的我设置的除以15，在iPhone6上面的font-size = 50px；也就是1rem = 50px；别问我为什么这么设置，全是因为个人习惯。
- 关于设备的物理像素比，如果有不懂的同学，我推荐大家去研读一下张鑫旭老师写的一篇文档，关于设备物理像素比的，里面说的很详细，下面是物理像素比的介绍
下面说一下我在使用第一种方案遇到的问题。
- 在我平时在任何的手机浏览器的页面中，不管是pc端的浏览器，还是手机自带的浏览器，都是可以自适应的缩放页面，达到的效果也是理想的。这个就不跟demo了。
- 后来我再工作中一直也是这么用的，在一次和app开发的小伙伴合作的时候，因为页面是内嵌在app里面，app开发的时候，会默认的对浏览器的使用会做一些默认的设置，就比如下面的这一条属性：
WebSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放,一般的安卓的app的开发者都会默认禁止这条属性；说是会对其他的东西有影响。那么这样的话，就不能够实现任意比例的缩放了，也当然达不到我们想要的结果。
后来我又找到我现在使用的第二种rem方案。贴代码
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>
第二个方案相比第一个方案来说有两个有点。
- 更加的方便，因为监听了当前窗口的变化而执行js代码，更加的便捷。
- 不用依赖标签<meta>的缩放大小的属性，可以直接写为
<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>
其实第二个方案来说还有一个缺点，第一个方案也同样具有：就是当app的开发者禁止调用我们前端开发的界面使用js的时候，那我们的rem方案就有不能自适应了，因为我们知道我们是设置了页面的基础字体的大小来达到自适应的目的，那么浏览器默认的rem和px的比例应该是1:16的比例。当静止js的时候，页面就还原成为原始的比例，而我们设置的一般,为了更好的计算都是1:50或者是1:100，那这样页面就会整体的显得缩小了很多，但是页面布局还是没有乱的。（那么有同学问了，既然我们知道问题所在了，那为什么不把页面基础字体的大小设置成和默认的差不多然后不就无敌了？那下面就有了第三种的方案）
这是第三种rem方案。贴代码
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之间的换算有点麻烦。
总结
不知道上面的分享有没有帮助到你，你要是问我有没有推荐的，我已经把适用的场景说的很明白了。你可以自己选择，我现在一般是用的第二种的。
希望能帮助到你们~如果有什么问题，请大家多多指出。
以上是关于rem在手机移动端app中的兼容适配问题的主要内容，如果未能解决你的问题，请参考以下文章