响应式设计之 —— 视口

viewport 视口

width: 视口宽度
device-width: 设备屏幕宽度

pc端

pc端只有一个视口，也就是浏览器主窗口的区域

手机端

移动端有三种视口：

布局视口： layout viewport
可视视口： visual viewport
理想视口： ideal viewport

• 可视视口

可视视口一般式不固定的，用户的缩放、拖动会修改。

• 布局视口

布局视口在每一款设备上是不变的。

因为移动端的屏幕尺寸都比较小，我们的页面根本放不下，这就有了布局视口的概念了，布局视口是虚拟的，一般都比较大，用户可以通过移动页面，缩放来通过可视视口查看页面的全部内容。

但是只是有这两个视口还是不行的，用户体验不是很好，这就有了我们的理想视口。

• 理想视口

理想视口就是布局视口在一个设备上的最佳尺寸，理想视口下的页面便于阅读。

怎么使用理想视口呢？

<meta name="viewport" content="width=device-width" />

// 这句话告诉，我要使用理想视口。也就是让布局视口的宽度等于可视视口的宽度 

• 不指定该属性

布局视口的宽度为厂商默认的宽度

• 指定属性

布局视口将称为理想视口，也就是等于可视视口。

通常我们会直接指定用户的缩放比例为1

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />