移动端开发之viewport+H5适配

移动端开发之viewport+H5适配

viewport概念

viewport是针对移动端设备的概念。包含三种：layout viewport（布局视口）、visual viewport（可视视口）、ideal viewport（理想视口）。

• layout viewport是一张无法改变大小和形状的大图（网页、html）；
• visual viewport是透过一个框架（屏幕）看到的图片区域；
  可通过缩放或旋转屏幕改变看到的区域，即改变了visual viewport的像素值。
• ideal viewport是厂商定的最合适的css像素大小;
• 注：以下所述像素除物理像素外均代表CSS像素。

移动设备上的页面是显示在viewport上的，故保证了PC端网页在移动端显示不会错乱；
移动设备上的浏览器都有viewport标签，故通过meta可设置viewport属性。

layout viewport（布局视口）

浏览器默认情况下把viewport设为一个比屏幕宽的值，如980px（厂商自己定），这样，即使那些为桌面浏览器设计的网站也可在移动浏览器上正常显示。这个默认的viewport叫做layout viewport。

1. 一些设备上的浏览器的默认layout viewport的宽度如下：

若无meta标签，即使用默认的viewport属性时，手机端渲染页面会有两个步骤：

a、渲染-会将把整个页面渲染在一个layout viewport(980px、1024px)中，以保证排版正确；此时未缩放，故visual viewport=屏幕大小对应的CSS像素=ideal viewport

c、缩放-将整个layout viewport缩放到visual viewport大小（整个屏幕大小）。
此时不改变layout viewport的css像素值而是改变css像素与物理像素的比例，使整个页面缩放到一个屏幕内。以保证网页在手机屏幕上完整显示。此时layout viewport=980px，且使得visual viewport=layout viewport=980px。

2. 获取layout viewport的尺寸（ios和android都支持。）

   document.documentElement.clientWidth（clientHeight）

visual viewport（可视视口）

它永远小于等于layout viewport，所以会有滚动条。

获取layout viewport的尺寸（ios支持，android 2，Opera mini UC8不支持。）

window.innerWidth/Height 

ideal viewport（理想视口）

指能完美适配移动设备的viewport。
完美适配指：
1、不需要用户缩放和滚动就能正常查看网站的所有内容；
2、显示的文字或图片等大小是合适的，即无论何种密度屏幕，显示的大小差不多。
不同的设备有不同的ideal viewport。如320px、375px、411px（CSS像素）等。

1. 获取ideal viewport的尺寸（ios和android都支持。）

   window.screen.availWidth/width
   = 屏幕逻辑像素宽度 = 屏幕宽度（非物理宽度）

2. 如果不设置meta viewport标签

   这样网页宽度为移动设备上浏览器默认的layout viewport的宽度，即980px,1024px等，是大于屏幕宽度的（px指css单位）。
   一个PC的页面在移动设备上会进行缩放并完整显示出来。
   注：此时visual width = layout width，iphone中980px代表整个屏幕。

3. meta标签控制viewport

   将默认的layout viewport变为ideal viewport，用meta设置。

<metaname="viewport"content="width=device-width,
		 initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

代码作用：
user-scalable：设置是否允许缩放。
initial-scale 相当于做了3件事：
1、将页面初始缩放因子设置为给定的值，计算出相对于ideal viewport（固定）的宽，得到visual viewport的宽。
2、设置laout viewport的宽等于visual viewport的宽。
3、设置layout viewport的宽等于ideal viewport的宽。

width=device-width相当于做了2件事：
1、将layout viewport设为设备屏幕的宽度（以css像素单位计算的宽度，即屏幕的逻辑像素宽）
2、将ideal viewport的宽设为layout viewport 的宽。

得到该标签的作用是让layout viewport的宽度等于设备的屏幕宽度，再等于ideal viewport的宽度，这就是移动web页面的最佳实践原则：
ideal viewport宽度 = layout viewport宽度 = 设备宽度（device-width）

4. 使用2个相同功能规则的原因

width=device-width在iphone和ipad上存在兼容性问题，他们横竖屏不分；
initial-scale=1.0在IE上存在兼容问题。

5. 缩放因子

缩放因子 = ideal viewport width / visual viewport width
即页面缩放是相对于ideal viewport来进行的。
也就是没有设置meta标签前缩放因子一直是小于1的数值。

总结

具体参见 http://blog.csdn.net/csdn_girl/article/details/68946719
1、设备像素是设备分辨率的单位，同一个设备的设备像素大小固定不变。

2、DPR = 设备像素/CSS像素 = 设备像素/设备独立像素~= PPI/160 = 页面缩放比例 ，这个缩放比例是默认比例

2、缩放因子 = ideal viewport width / visual viewport width ，即自定义的缩放比例

缩放比例不同，表示1个css像素代表的设备物理像素个数不同，越大，代表的越多，越小代表的越小。

3、visual viewport width = ideal viewport width / zoom factor (其中，同一个设备的ideal viewport 的宽度固定不变，因此缩放页面只是改变visual viewport的大小)

4、css像素 = 设备独立像素 = 逻辑像素

4、同一个设备的CSS像素数字大小不变，但每CSS像素代表的长度会变，即CSS像素会伸缩
5、现代浏览器中实现缩放的方式都是「拉伸」像素：即每CSS像素单位代表的长度发生变化，而像素总数字不变。所以缩放会引起CSS像素的变化。
6、进行缩放时，visual viewport的尺寸会发生变化，layout viewport的尺寸保持不变
7、移动设备上的layout viewport的尺寸都大等于其浏览器的可视区域(visual viewport)
8、css中的1px并不是代表设备像素上的1px
9、移动设备分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大
10、ideal viewport的宽度等于移动设备的屏幕宽度(这个理想的宽度是指以CSS像素单位计算的宽度，即屏幕的逻辑像素宽度)，跟设备的物理宽度没有关系。同一个设备的ideal viewport的宽度固定不变。
12、移动端页面设计尺寸原则：因为dpr一般都是1或者2，所以设计页面时应按照设备逻辑像素（ideal viewport）的2倍大小进行设计

H5适配

手机端适配-rem布局
原理是：
1、根据设备的DPR设置meta name=“viewport” content属性的scale值

let metaEl = doc.querySelector('meta[name="viewport"]');
const scale = 1 / dpr;
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

2、根据DPR设置html的font-size大小

const _baseFontSize = 100;
const fontscale = 1; // 有的业务希望能放大一定比例的字体;
doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;