web移动端适配入门

移动端适应中各种名词

PPI（每英寸像素）

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

计算公式

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

image.png

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">