移动端适配

怼烎@ 2022-05-27 23:28 430阅读 0赞

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png

大多都是介绍手淘团队的[flexible.js][]，相信大多数人都读过大漠老师写的这篇文章，请仔细阅读文章；

flexible.js的原理

![52800879][]

通过移动设备的dpr（设备像素比：设备像素比 = 物理像素 / 设备独立像素 ；window.devicePixelRatio）和屏幕宽度（document.document.clientWidth）来动态的改变html的font-size的大小

手淘团队flexibe [github源码][github]，中间有几个地方不明白；也看了很多解释得文章，也没能很好的理解

1.上面的那一句注释是不是写错了，ios下不是分2、3屏。他干嘛注释说用2倍方案？？？

2.如果是iPhone5.则其dpr为2，scale=0.5,则<meta name='viewport' initial-scale='0.5'>，如果是安卓手机则其dpr为1，相应的则其scale=1；

接着下面的html 的font-size的大小为:

var rem = width / 10;

docEl.style.fontSize = rem + 'px';;

为什么除以10呢，，大漠老师的文章里谁的是为了以后更好的兼容vh和vw这两个强大的新单位，

现在写样式的时候只需把设计图上的尺寸/75(iphone6的设计图)，单位为rem即可，

即1rem等于屏幕宽度的十分之一。

现在设计图的px转换为rem可以通过sublime3的插件，或用less函数（我至今不会用），

但我觉得，让 var rem = width/750 \*100(iphonr6设计图)，

这样写的1rem就等于你在设计图上测量的尺寸除以100即可3.

确实是这样，应用了flexible移动端布局简单多了，可以像写pc端那样愉快的玩耍了

4、我现在一直搞不明白dpr是用来做什么的，

网上有很多文章说主要解决了border: 1px问题，图片高清问题，

我写的代码不多没有遇到这两个问题，，所以没有切身的体会，

那个retina高清屏显示的问题我也搞的一知半解的，

布局中，字体不适用于rem单位，可以由dpr的不同设置不同字体，

flexible对字体的处理方案 我觉得，flexible里面dpr是不是只是用来解决高清屏显示，border：1px问题，

源码我也是看的不太懂，

另外说一说dpr存在的问题，看到另一篇博客[点击打开链接][Link 1]，

说小米4，检测是会弹出iphone，还有应用了dpr之后媒体查询可能问题，

（就是媒体查询的宽度会和设备的宽度\*dpr，相等），

即在rem布局时，慎用媒体查询/ 默认写上dpr为1的

fontSize

\[data-dpr="2"\]

div \{ font-size: 24px;\}

\[data-dpr="3"\]

div \{ font-size: 36px;\}

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  if (!dpr && !scale) \{  
2.          var isAndroid = win.navigator.appVersion.match(/android/gi);  
3.          var isIPhone = win.navigator.appVersion.match(/iphone/gi);  
4.          var devicePixelRatio = win.devicePixelRatio;  
5.          if (isIPhone) \{  
6.              // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案  
7.              if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) \{                  
8.                  dpr = 3;  
9.              \} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2))\{  
10.                 dpr = 2;  
11.             \} else \{  
12.                 dpr = 1;  
13.             \}  
14.         \} else \{  
15.             // 其他设备下，仍旧使用1倍的方案  
16.             dpr = 1;  
17.         \}  
18.         scale = 1 / dpr;  
19.     \}  
20.   
21.     docEl.setAttribute('data-dpr', dpr);  
22.     if (!metaEl) \{  
23.         metaEl = doc.createElement('meta');  
24.         metaEl.setAttribute('name', 'viewport');  
25.         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');  
26.         if (docEl.firstElementChild) \{  
27.             docEl.firstElementChild.appendChild(metaEl);  
28.         \} else \{  
29.             var wrap = doc.createElement('div');  
30.             wrap.appendChild(metaEl);  
31.             doc.write(wrap.innerHTML);  
32.         \}  
33.     \}  
34.   
35.     function refreshRem()\{  
36.         var width = docEl.getBoundingClientRect().width;  
37.         if (width / dpr > 540) \{  
38.             width = 540 \* dpr;  
39.         \}  
40.         var rem = width / 10;  
41.         docEl.style.fontSize = rem + 'px';  
42.         flexible.rem = win.rem = rem;  
43.     \}  
44. </span>

可能是我没有深入的理解dpr这个问题，

我现在就觉得，我就可以只根据屏幕宽度，来动态改变html font-size大小，不去考虑，dpr的问题，

现在我这样写也没出现什么问题，显示效果也还行，真的有必要使用dpr吗？？？

我看到了这篇文章想法和我一样[点击打开链接][Link 2]，真的有必要吗？

现在我是这样做的，写一段这样的js，仅仅只靠，屏幕宽度来改变html font-size大小，

我是按phone6设计图来的，只需在设计图上量取尺寸，除以100 ，写在css样式里，单位为rem，方便极了，至今还没发现问题

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  (function (doc, win) \{  
2.       var docEl = doc.documentElement,  
3.           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
4.           recalc = function () \{  
5.               var clientWidth = docEl.clientWidth;  
6.               if (!clientWidth) return;  
7.               if(clientWidth>=750)\{  
8.                   docEl.style.fontSize = '100px';  
9.               \}else\{  
10.                   alert(clientWidth);  
11.                  docEl.style.fontSize = 100 \* (clientWidth / 750) + 'px';  
12.              \}  
13.          \};  
14.   
15.      if (!doc.addEventListener) return;  
16.      win.addEventListener(resizeEvt, recalc, false);  
17.      doc.addEventListener('DOMContentLoaded', recalc, false);  
18.  \})(document, window);  
19. ;/script>

3、我还用过，用css3zoom ，缩放，对元素进行缩放也是根据屏幕宽度的  
 ![52800879][]

通过，zoom属性根据不同屏幕尺寸，按照不同比例进行缩放，也能达到移动端适配效果，

但zoom这个属性，的支持程度实在太差，写的是时候字体缩放出现了问题，

安卓字体缩放正常，ios无法缩放，最后通过 -webkit-text-adjust：auto；虽然勉强达到了效果，应付了那次项目上线，最后心里还是挺害怕的

[flexible.js]: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
[52800879]: /images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png
[github]: https://github.com/amfe/lib-flexible/blob/master/src/flexible.js
[Link 1]: http://blog.csdn.net/xiaozhuxmen/article/details/51252996
[view plain]: /images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png#
[Link 2]: https://segmentfault.com/q/1010000005950955