viewport的小芝士

什么是viewport声明？

viewport是用于开发移动站点的一种meta元信息，主要用来告诉浏览器视口大小。

怎么用？

<meta name="viewport" content="width:device-width, initial-scale=1.0, user-scalable=no, maxinum-scale=1.0, minimum-scale=1.0">

上面就是一条完整的viewport声明，其中 "width=device-width" 表示把viewport设置为设备逻辑大小（后面会讲逻辑大小概念），你也可以把它设置成任何你想要的宽度，单位px可带可不带

概念

layout viewport

布局视口，
它总是等于设备屏幕大小，但在以下两种情况下，前面的结论不成立：

1. 没有声明viewport
2. 根元素html 或 body上设置了固定大小

第一种情况下，viewport使用以下黙认值：

chrome	safari	firefox	opera
980	980	980	980

第二种情况下，viewport等于设置的固定大小

如果想查看你的手机浏览器布局视口大小，可通过以下代码获取：

document.body.clientWidth;
document.body.clientHeight;

visual viewport

视觉视口，它是设备屏幕的逻辑大小，它用像素来表示

document.documentElement.clientWidth;
document.documentElement.clientHeight;

通过上面的代码获取视觉视口的宽高

跟布局视口一样，没有声明viewport时，大小跟布局视口一样。

如果布局视口大于视觉视口，会出现滚动条。

下面讲讲设备屏幕的逻辑大小，在开始前，先了解下面3个概念：

• ppi —— 每英寸像素点数量
• 基准ppi—— ≈160/inch
• 显示比例—— 设备ppi / 基准ppi

现在的手机都是高清屏——肉眼看不出像素点，电脑是普通屏——ppi ≈ 72 ，这样就出现了一个问题，

在电脑上的14px，放到手机上，视觉大小相当于7px甚至更小，这是因为像素是一个相对单位，它的大小取决于设备像素点大小，这时手机浏览器就需要处理一下，把它放大一些，上面的显示比例就是一个放大倍数，如显示比例为2，那么在手机上就用2倍比例来显示。

ideal viewport

理想视口，顾名思义就是最理想的视口大小——用户无需缩放或滚动就可以浏览横向的全部内容。
它只是一种概念——用于指导开发者设计最理想的页面大小，它的宽度应为设备逻辑宽度。

关于viewport的知识就讲这些，不对的地方欢迎指出