Web移动端适配总结

移动端适配的相关概念以及几种方案总结

适配相关概念

  1. 布局视口(layout viewport):html元素的上一级容器即*容器,用于解决页面在手机上显示的问题。大部分移动设备都将这个视口分辨率设置为980px,所以PC上的网页基本上能在手机上呈现,只不过看上去很小,一般默认可以通过手动缩放网页。获取当前布局视口用document.documentElement.clientWidth
  2. 视觉视口(visual viewport):指用户可见页面区域,即屏幕显示器的物理像素。获取当前的视觉视口可以用window.innerWidth
  3. 理想视口(ideal viewport):也就是我们通常说的屏幕分辨率。比如Iphone5屏幕分辨率是320。

使用viewport元标签控制布局

如下的viewport元标签的属性
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

以下是每个属性的介绍:

属性名 取值 描述
width 正整数或device-width 定义layout viewport的值
height 正整数或device-height 定义viewport height,单位为像素,一般不用
initial-scale [0,0 - 10.0] 定义初始缩放值。比如:设置initial-width=1.5 就是将visual viewport设置成ideal viewport宽度的1 /1.5倍
maximum-scale [0.0 - 10.0 ] 用户能够放大的最大比例
minimum-scale [0,0 - 10.0] 用户能缩小的最小比例,一般不设置,因为太小的字不方便阅读
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值为yes

width的详细介绍:设置为device-width时表示layout viewport的宽度等于ideal viewport的值。同时设置widthintital-scale时,最终的视口宽度等于两者较大的那一个。也就是说:

  1. layout viewport小于visual viewport时,视口宽度最终是visual viewport的值(经测试,layout viewport的值也会自动变成visual viewport
  2. layout viewport大于visual viewport时,视口宽度最终是layout viewport的值(经测试,visual viewport的值不会变成这时layout viewport的值)

initial-scale的详细介绍:缩放比例 = ideal layout / visual layoutideal viewport是不会改变的,这个值是为了改变visual viewport。缩放比例也有默认值,没有设置initial-scale时,浏览器会取适当的缩放比例使布局视口正好铺满屏幕即有 可视视口(visual viewport)尺寸=理想视口尺寸(ideal viewport)。也就是说设置width=device-width与设置initial-scale=1.0效果相同。

方案

  1. 荔枝FM的方案:将layout viewport定义为设计稿的宽度,这样的好处在于css像素对应设计稿的px(以640px为例),不需要进行单位换算。但是有几点需要注意的地方。
    1. 为了保证最终的视口的值都是640px,而不会变成其他值(前面说过,最终视口的值会取width与initial-scale属性的最大值)。要把visual viewport设置成与layout viewport一样大,即设置initial-scale的值为 ideal viewport / 640。之前也有一个属性代替了这个操作,target-densitydpi=device-dpi,但资料显示target-densitydpi=device-dpi是一个被抛弃的属性,不推荐使用
  2. 网易的纯REM方案:
    1. 采用理想视口作为可视视口的尺寸,只需要把缩放比定为1。<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
    2. 计算 html 元素的 font-size

      750px 是设计稿的宽度(以iphone6的物理像素数为标准),100是期望的换算比例,即设计稿中 100px 的长度对应css中 1rem,将设计稿中的长度数值除以 100 得到的就是以 rem 为单位的 css 长度的数值,设计稿的宽换算为以 rem 为单位的 css 长度应为 (750/100) rem,同时设计稿的宽对应可视视口的宽,即有 (750/100) rem = 可视视口宽,1 rem = 可视视口宽 * (100/750),(100/750)就是我们要的系数

    在页面初始化时设置一下 html 元素的 font-size:

    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';

  3. 最后一种方案也是最合理的---来自于手淘的最佳实践
    1. 以上两种方案都存在一个问题,就是在retina屏幕上没有处理dpr(device pixel ratio)的副作用,何为dpr物理像素 / 设备独立的像素(ideal viewport)。在JS中可以通过window.devicePixelRatio获取当前设备的dpr
    2. 为何要处理dpr:在retina屏幕上,物理像素会被放大为原本的dpr倍。这时候就会存在以下几个问题
      • 图片变模糊了
      • border: 1px问题,边框自然会被放大为dpr
      • ...
    3. 解决方案:使用initial-scale=1/dpr对含有px单位的元素做处理,但是单纯这么做会导致字体元素的大小都会缩小。如何解决这个问题呢?答案就是在第二种方案的根元素设置fontSize的基础上再乘以一个dpr,这样对于以rem衡量的元素又能正常适配了。

参考阅读:

上一篇:css样式重置 移动端适配


下一篇:Leetcode 365. Water and Jug Problem