移动端网页适配最佳解决方案

作者 拓荒 日期 2017-12-02

之前也有一个常用的方案就是基于rem的原理，针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。这里我们提取了一个公式(rem表示基准值)

rem = document.documentElement.clientWidth * dpr / 10

说明：

乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1),。
除以10，是为了取整，方便计算(理论上可以是任何值)
所以就像下面这样，html的font-size可能会：

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2 / 10 = 64px

iphone6: 375px * 2 / 10 = 75px

对于动态改变根节点html的font-size，我们可以通过css做，也可以通过javascript做。

css方式，可以通过设备宽度来媒体查询来改变html的font-size：

html{font-size: 32px;}
/* iphone 6  */
@media (min-device-width : 375px) {
   html{font-size: 64px;}
}
/* iphone6 plus  */
@media (min-device-width : 414px) {
    html{font-size: 75px;}
}

缺点：通过设备宽度范围区间这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为360px 和 宽度为320px的手机，因为屏宽在同一范围区间内(<375px)，所以会被同等对待(rem基准值相同)，而事实上他们的屏幕宽度并不相等，它们的布局也应该有所不同。最终，结论就是：这样的做法，没有做到足够的精确，但是够用。
javascript方式，通过上面的公式，计算出基准值rem，然后写入样式，大概如下(代码参考自kimi的m-base模块)

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;


// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

这种方式，可以精确地算出不同屏幕所应有的rem基准值，缺点就是要加载这么一段js代码，但个人觉得是这是目前最好的方案了。

因为这个方案同时解决了三个问题：

  1. border: 1px问题
  2. 图片高清问题
  3. 屏幕适配布局问题

但是有时候产品经理或者客户要求在不同尺寸的屏幕上显示的字体大小要一致,而不是跟着屏幕大小进行缩放，毕竟屏大要演示更多内容嘛，只是单纯的缩放的话大屏的优势就比较少了，所以给出以下的阿里高清方案，该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）;

!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);

demo实例

代码原理

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成） 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。

优势介绍

  • 引用简单，布局简便
  • 根据设备屏幕的DPR,自动设置最合适的高清缩放。
  • 保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
  • 有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）

    使用方法

    绝不是每个地方都要用rem，rem只适用于固定尺寸！
    在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！
    此方案默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
    比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：
    .myBtn {
       width: 0.55rem;
       height: 0.37rem;
    }

常见问题说明

1.问：为啥手机网页效果图宽度是要640或者750的，我非得弄个666的不行咩？
答：老实说当然可以，不过为了规范，640或者750是相对合适的。
拿Iphone 5s 举例，它的css像素宽度是320px，由于它的dpr=2，所以它的物理像素宽度为320 × 2 = 640px，这也就是为什么，你在5s上截了一张图，在电脑上打开，它的原始宽度是640px的原因。
那 iphone 6 的截图宽度呢？ 375 × 2 = 750
那 iphone 6 sp 的截图宽度呢？ 414 × 3 = 1242
以此类推，你现在能明白效果图为什么一般是 640 ，750 甚至是 1242 的原因了么？（真没有歧视安卓机的意思。。。）

2.问：宽度用rem写的情况下， 在 iphone6 上没问题， 在 iphone5上会有横向滚动条，何解？
答：假设你的效果图宽度是750，在这个效果图上可能有一个宽度为7rem（高清方案默认 1rem = 100px）的元素。我们知道，高清方案的特点就是几乎完美还原效果图，也就是说，你写了一个宽度为 7rem 的元素，那么在目前主流移动设备上都是7rem。然而，iphone 5 的宽度为640，也就是6.4rem。于是横向滚动条不可避免的出现了。
怎么办呢？ 这是我目前推荐的比较安全的方式：如果元素的宽度超过效果图宽度的一半（效果图宽为640或750），果断使用百分比宽度，或者flex布局。就像把等屏宽的图片宽度设为100%一样。

3.问：不是 1rem = 100px吗，为什么我的代码写了一个宽度为3rem的元素，在电脑端的谷歌浏览器上宽度只有150px?
答：先说高清方案代码，再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size，
如果dpr=1(如电脑端），则html的font-size为50px，此时 1rem = 50px
如果dpr=2(如iphone 5 和 6），则html的font-size为100px，此时 1rem = 100px
如果dpr=3(如iphone 6 sp），则html的font-size为150px，此时 1rem = 150px
如果dpr为其他值，即便不是整数，如3.4 , 也是一样直接将dpr 乘以 50 。

再来说说效果图，一般来讲，我们的效果图宽度要么是640，要么是750，无论哪一个，它们对应设备的dpr=2，此时，1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多，可以帮你快速换算单位，比如在750宽度下的效果图，某元素宽度为53px，那么css宽度直接设为53/100=0.53rem了。

然而极少情况下，有设计师将效果图宽定为1242px，因为他手里只有一个iphone 6 sp (dpr = 3)，设计完效果图刚好可以在他的iphone 6 sp里查看调整。一切完毕之后，他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3，也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素，它的css宽度应该为 90/150=0.6rem。由于咱们的高清方案默认1rem=100px，为了还原效果图，你需要这样换算。当然，一个技巧就是你可以直接修改咱们的高清方案的默认设置。在代码的最后 你会看到 flex(false, 100, 1) ，将其修改成flex(false, 66.66667, 1)（感谢简友：V旅行指出此处错误！ 2017/3/24）就不用那么麻烦的换算了，此时那个90px的直接写成0.9rem就可以了。

4.问：在此方案下，我如果引用了别的UI库，那些UI库的元素会显得特别小，如何解决？
答：可以这样去理解问题的原因，如果不用高清方案，别的UI库的元素在移动设备上（假设这个设备是iphone 5好了）显示是正常的，这没有问题，然后我们在这个设备上将该页面截图放到电脑上看，发现宽度是640（问答1解释过了），根据你的像素眼大致测量，你发现这个设备上的某个字体大小应该是12px，而你在电脑上测量应该是24px。

现在我们使用高清方案去还原这个页面，那么字体大小应该写为 0.24rem 才对！

所以，如果你引用了其他的UI库，为了兼容高清方案，你需要对该UI库里凡是应用px的地方做相应处理，即： a px => a*0.02 rem
(具体处理方式因人而异，有模块化开发经验的同学可使用类似的 px2rem 的插件去转化，也可以完全手动处理）

然而真实情况往往更为复杂，比如，你引入了百度地图（N个样式需要处理转换）；或者你引入了一个
framework；又或者你使用了 video 标签，上面默认的尺寸样式很难处理。等等这些棘手问题

面对这些情况，此时我们的高清方案如果不再压缩页面，那么以上问题将迎刃而解。
基于这样的思路，笔者对高清方案的源码做了如下修改，即添加一个叫做 normal 的参数，由它来控制页面是否压缩。
在文章顶部代码的最后，你会看到 flex(false, 100, 1)，默认情况下页面是开启压缩的。

如果你需要禁止压缩，由于我们的源码执行后，直接将flex函数挂载到全局变量window上了，此时你直接在需要禁止压缩的页面执行 window.flex(true) 就可以了，而rem的用法保持不变。

有一点美中不足的是，如果禁止了页面压缩，高清屏的1像素就不能实现了，如果你必须要实现1像素，那么自行谷歌：css 0.5像素，有N多的解决方案，这里不再赘述。

5.问：有时候字体会不受控制的变大，怎么办？
答：在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决

解决方案：

*, *:before, *:after { max-height: 100000px }

补充：有同学反映，在一些情况下 textarea 标签内的字体大小即便加上上面的方案，字体也会变大，无法控制。此时你需要给 textarea 的 display 设为 table 或者 inline-table 即可恢复正常。
6.问：我在底部导航用的flex感觉更合适一些，请问这样子混着用可以吗？
答：咱们的rem适合写固定尺寸。其余的根据需要换成flex或者百分比。源码示例中就有这三种的综合运用。

7.问：在高清方案下，一个标准的，较为理想的宽度为640的页面效果图应该是怎样的？
点击浏览：一个标准的640手机页面设计稿参考（没错，在此方案中，你可以完全按照这张设计稿的尺寸写布局了。就是这么简单！）
另外阿里UED团队对移动端高清、多屏适配方案参考文章：http://www.aliued.com/?p=3166

FEATURED TAGS