rem在⼿机移动端app中的兼容适配问题
这是我之前⼀直使⽤的第⼀种rem⽅案。贴代码
1 <script>
2// 适⽤于750的设计稿
3var 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// 获取浏览器窗⼝⽂档显⽰区域的宽度，不包括滚动条。
10var iWidth = document.documentElement.clientWidth;
11// 设置页⾯基础的字体⼤⼩
12 ElementsByTagName('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>
2var 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>
第⼆个⽅案相⽐第⼀个⽅案来说有两个有点。
1. 更加的⽅便，因为监听了当前窗⼝的变化⽽执⾏js代码，更加的便捷。
2. 不⽤依赖标签<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">
11var 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 {
47float: 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">
原生安卓app开发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⽅案。贴代码
var e=(document.documentElement.clientWidth>=640?640:document.documentElement.clientWidth)/320*12;
document.documentElement.ElementsByTagName("html")[0].style.fontSize=e+"px"
};
这种⽅案的的好处是它的rem和px⽐值在浏览器模拟机器上⾯的⽐值是1:12，其数值⼤⼩也同样是可以调整的，这样的做的好处就是，在安卓原⽣的app上⾯，即使app的开发者禁⽌了js的使⽤，也可以做到⼀个相对的⾃适应，效果要⽐前⾯的两个要好⼀点，但是缺点就是px和rem之间的换算有点⿇烦。
总结
不知道上⾯的分享有没有帮助到你，你要是问我有没有推荐的，我已经把适⽤的场景说的很明⽩了。你可以⾃⼰选择，我现在⼀般是⽤的第⼆种的。
希望能帮助到你们~如果有什么问题，请⼤家多多指出。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论