移动端自适应方案调研

[tiansn]

最近在写H5项目，遇到一些适配的问题，在这里总结一下。

痛点

由于ios和安卓设备的越来越多样化，导致各种尺寸的移动端设备层出不穷，导致存在各种屏幕尺寸。详情可以在谷歌的这个网站查看https://material.io/devices/

我们项目中目前用到的解决方案

• viewport的值设置为1
• UI给出的视觉设计稿是640px的宽度（以iPhone5的屏幕宽度为参照）
• 布局：宽度用百分比，活动页面用到媒体查询，切页面的时候按UI标注的尺寸的一半来处理，因为viewport的值是1
  这样的处理方式存在有哪些问题呢？
• 由于全站都是使用的viewport=1来处理的，导致1px的显示比实际的1px要大，特别是边框的显示比1px要大
• 没有针对dpr为2和3的iPhone手机做区分处理导致显示效果不是最优

目前市面上存在的一些解决方案

美团的处理方式

• 适配：区分安卓和iPhone，安卓的viewport设置为1，iPhone的viewport设置为0.5
• H5全站的单位用rem，包括字体单位也是rem
• 布局：用flex布局
  他们这样处理存在的不足？
• 没有处理1px的问题。

京东H5的处理方式

• 我看了京东H5的首页，他们用的跟我们线上的类似，宽度百分比，单位用px，viewport不管是安卓还是iPhone都是用1
• 针对不同屏幕宽度做媒体查询，设置字体的大小
• 对1px的处理方式是用的缩放，如下代码所示

.bdr-r:after {
    height: 100%;
    content: '';
    width: 1px;
    border-right: 1px solid #f0f0f0;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    z-index: 10;
}

手淘H5的解决方案

• 淘宝的处理方案：针对iPhone和安卓做不同的处理。iPhone：dpr为2的viewport设置为0.5,dpr为3的viewport设置为0.3
安卓:因为安卓有些设备的dpr值太复杂（值太多、不准确），因此淘宝的处理方式是都统一用viewport为1处理
• 手淘开源出来的移动端自适应方案：lib.flexible
• lib.flexible的使用方法

移动端 Retina屏各大主流网站1px的解决方案

• 参考这篇博客