H5移动端适配 - Flexible方案

一、移动端一些概念

  • 视觉稿(选取一款手机的屏幕宽高作为基准)

在前端开发之前,视觉 MM 会给我们一个psd文件,称之为视觉稿。

对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:

1)首先,选取一款手机的屏幕宽高作为基准(以前是 iPhone4 的 320×480,现在更多的是 iphone6的 375×667)。

2)对于 retina 屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的 2 倍,也就是说像素点个数是原来的 4 倍(对 iphone6 而言:原先的 375×667,就会变成 750×1334)。

问题:

对于 dpr=2 的手机,为什么画布大小×2,就可以解决高清问题?

对于 2 倍大小的视觉稿,在具体的 css 编码中如何还原每一个区块的真实宽高(也就是布局问题)?

  • 标注稿

H5移动端适配 - Flexible方案

  • 移动端尺寸

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css 像素),然后由相关系统转换为物理像素。

设备像素比(device pixel ratio)

设备像素比(简称 dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到: 设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x 方向或者 y 方向。

在 Javascript 中,可以通过 window.devicePixelRatio 获取到当前设备的 dpr。

在 css 中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio 进行媒体查询,对不同 dpr 的设备,做一些样式适配(这里只针对 webkit 内核的浏览器和 webview)。

在普通屏幕下,1 个css 像素 对应1 个物理像素(1:1)。 在retina 屏幕下,1 个css 像素对应4 个物理像素(1:4)

例:width: 2px;height: 2px; 如下

  • 位图像素

一个位图像素是栅格图像(如:png, jpg, gif 等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。

retina 下图片的展示情况?

理论上,1 个位图像素对应于 1 个物理像素,图片才能得到完美清晰的展示。

在普通屏幕下是没有问题的,但是在 retina 屏幕下就会出现位图像素点不够,从而导致图片模糊的情况。

H5移动端适配 - Flexible方案

如上图:对于 dpr=2 的 retina 屏幕而言,1 个位图像素对应于 4 个物理像素,

由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。

所以,对于图片高清问题,比较好的方案就是两倍图片(@2x)。如:200×300(css pixel)img 标签,就需要提供 400×600 的图片。

如此一来,位图像素点个数就是原来的 4 倍,在 retina 屏幕下,位图像素点个数就可以跟物理像素点个数形成 1 : 1 的比例,图片自然就清晰了(这也解释了之前留下的一个问题,为啥视觉稿的画布大小要×2?)。

这里就还有另一个问题,如果普通屏幕下,也用了两倍图片,会怎样呢?

很明显,在普通屏幕下,200×300(css pixel)img 标签,所对应的物理像素个数就是 200×300 个,而两倍图片的位图像素个数则是 200×300*4,所以就出现一个物理像素点对应 4 个位图像素点,

所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一,我们称这个过程叫做 downsampling),肉眼看上去虽然图片不会模糊,但是会觉得图片缺少一些锐利度,或者是有点色差(但还是可以接受的)。

H5移动端适配 - Flexible方案

  • Retina 下,图片高清问题

所以最好的解决办法是:不同的 dpr 下,加载不同的尺寸的图片。

不管是通过 css 媒体查询,还是通过 javascript 条件判断都是可以的。那么问题来了,这样的话,不就是要准备两套图片了嘛?(@1x 和@2x)

我想,做的好的公司,都会有这么一个图片服务器,通过 url 获取参数,然后可以控制图片质量,也可以将图片裁剪成不同的尺寸。

所以我们只需上传大图(@2x),其余小图都交给图片服务器处理,我们只要负责拼接 url 即可。

Retina 下,border: 1px 问题

设计师想要的 retina 下 border: 1px;,其实就是 1 物理像素宽,对于 css 而言,可以认为是 border:0.5px;,这是 retina 下(dpr=2)下能显示的最小单位。

然而,无奈并不是所有手机浏览器都能识别 border: 0.5px;,ios7 以下,android 等其他系统里, 0.5px 会被当成为 0px 处理,那么如何实现这 0.5px 呢?

方案一: 最简单的一个做法就是这样(元素 scale):

.scale{ position: relative;}

.scale:after {content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #ddd; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0;}

方案一问题:

通过 transform: scaleY(.5)缩小 0.5 倍来达到 0.5px 的效果,但是这样 hack 实在是不够通用(如:圆角等)。

方案二:页面 scale 的方案,是比较通用的,几乎满足所有场景。

对于 iphone5(dpr=2),添加如下的 meta 标签,设置 viewport(scale 0.5):

页面scale,必然会带来一些问题:

1)字体大小会被缩放

2)页面布局会被缩放(如: div 的宽高等)

二、多屏适配布局问题

  • Flexible方案

    1) 下载bower下载lib-flexible

    将flexible_css.js,flexible.js文件加载到项目中:

 <script src="lib/flexible.js"></script>
     <script src="lib/flexible_css.js"></script>

或直接加载阿里CDN的文件:

   <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    2).flexible 实际上作用

    就是能过JS来动态改写 meta 标签,代码类似这样:

    var metaEl = doc.createElement('meta');
    var scale = isRetina ? 0.5:1;
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ',     maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
	  document.documentElement.firstElementChild.appendChild(metaEl);
    } else {
	  var wrap = doc.createElement('div');
	  wrap.appendChild(metaEl);
	  documen.write(wrap.innerHTML);
    }

事实上他做了这几样事情:

  •   添加<meta>标签,并动态改写 <meta> 标签
  •   给 <html> 元素添加 data-dpr 属性,并且动态改写 data-dpr 的值
  •   给 <html> 元素添加 font-size 属性,并且动态改写 font-size 的值

3. 布局(以scss为例)

1)基本布局:rem

将视觉稿中的px单位转换成rem单位 :

html元素尺寸 =  视觉稿px值 / rem基准值

例如:视觉稿宽度750px,则html中的缩放倍率就是750 / 10 = 75,然后以这个为基准值,如果视觉稿中某块小内容宽度是150px,则html中这块内容宽度就是 150 / 75 = 2rem

2)字号:px

字号用px单位,并根据情况用[data-dpr]属性来区分不同dpr下的文本字号大小。

为了能更好的利于开发,在实际开发中,我们可以定制一个font-dpr()Sass混合宏:

    @mixin font-dpr($font-size){      font-size: $font-size;      [data-dpr="2"] & {        font-size: $font-size * 2;      }      [data-dpr="3"] & {        font-size: $font-size * 3;      }    }

设置混合宏之后,在开发中可以直接这样使用:

    @include font-dpr(24px);

相关推荐