web移动端适配入门

移动端适应中各类名词

PPI（每英寸像素）

一个表示打印图像或显示器单位面积上像素数量的指数。通常用来计量电脑，电视机和手持电子设备屏幕的精细程度。一般状况下，每英寸像素值越高，屏幕能显示的图像也越精细。它的值为 屏幕对角线分辨率/屏幕尺寸。

计算公式

例如：iphone5 的屏幕分辨率为1136 x 640 ,屏幕大小为 4 英寸。能够由下公式计算出他的PPI为326。

layout viewport（布局视口）

布局视口是指网页的内容区域的大小。在pc端布局视口会随着浏览器的大小变化而变化。在移动端浏览器为了使移动端能够兼容pc端的页面，会将布局视口宽度默认设为980px左右。

获取方式

document.documentElement.clientWidth/Height
复制代码

设置方式

<meta name="viewport" content="width=640">
复制代码

visual viewport（视觉视口）

视觉视口是指浏览器市口的大小，举个例子，若是说布局视口是一幅画，那视觉视口就是画的画框，而咱们看到的内容是画框中的内容。在移动端不作meta标签的状况下，这个画框会根据画的内容的大小来作适应性调整，既画的内容若是宽度若是是1000px，那视觉视口会扩充到1000px。若是画的内容是330px，视觉视口会收缩到330px。可是视觉视口的收缩和扩充是有上限和下限的。

获取方式

window.innerWidth/height
复制代码

设置方式

initial-scale设置初始缩放比例(视觉市口相对于屏幕尺寸)间接设置了视觉视口。缩放比例越大，值越小。

<meta name="viewport" content="initial-scale=1">
复制代码

移动端适配

因为移动端浏览器会设置默认的布局视口宽度（980px），视觉视口为了适应布局视口的宽度会进行必定程度的缩放。所以移动端的网页都是被缩放的，网页的文字图片都会被变得特别小。

解决方案

<meta name="viewport" content="width=device-width,initial-scale=1">
复制代码

• 设置布局视口宽度与设备宽度一致
• 设置视觉视口与设备的缩放比例为不缩放

其实布局视口的宽度会影响视觉视口的宽度，视觉视口的宽度也会影响布局视口。二者会保持一致。所以在大多数状况下使用下面两种方案也能够解决问题。可是为了不没必要要的问题仍是使用前面的方案为优。

<meta name="viewport" content="width=device-width">
复制代码

<meta name="viewport" content="initial-scale=1">
复制代码