视口相关概念

 视口

了解视口相关概念及理想视口的设置 是移动Web开发非常重要环节。

#### 什么是视口？

- 视口简单来说就是浏览器显示页面内容的区域。

- 视口：浏览器显示内容的屏幕区域，相当于PC端浏览器可视区 (白板区域)

- 在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；

#### 视觉视口

【视觉视口是指用户当前看到区域】即设备宽度


#### 布局视口

移动设备的浏览器都默认设置 了一个viewport元标签，定义了一个虚拟的布局视口，,CSS 布局将会根据它来进行计算，并被它约束。

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px

所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。

 


不同设备大小也不相同由设备出厂设置决定，下图列出了一些设备上浏览器的默认viewport的宽度。


布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height

如果要显式设置布局视口，可以使用 HTML 中的 meta 标签进行设置

#### 理想视口

布局视口对用户不友好，基于理想视口设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户。

为了网站的移动端能有更好的浏览器和阅读而设置 （苹果公司引入的理想视口的概念）

理想视口可以使用 HTML 中的 meta 标签显式设置布局视口等于设备宽度

```html

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

创建一个虚拟窗口，窗口宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放

content属性：

    - width 虚拟窗口的屏幕宽度 device-width 设备宽

    - initial-scale 页面初始缩放比

    - user-scalable 是否允许用户手动缩放

        - user-scalable=no 不允许用户手动缩放

        - user-scalable=yes 允许用户手动缩放，默认值

    - maximum-scale 最大缩放比

    - minimum-scale 最小缩放比

 height : 设置viewport的高度（我们一般而言并不能用到 ）

常见的手机设置的大小

    iphone4/5/SE 320

    iphone6/7/8 375

    iphone6plus、 iphone7plus、 iphone8plus 414

```

属性说明:

| width         | 正整数或device-width  | 定义视口的宽度，单位为像素                          |

| ------------- | --------------------- | --------------------------------------------------- |

| height        | 正整数或device-height | 定义视口的高度，单位为像素，一般不用                |

| initial-scale | [0.0-10.0]            | 定义初始缩放比率                                    |

| minimum-scale | [0.0-10.0]            | 定义最小缩放比例，它必须小于或等于maximum-scale设置 |

| maximum-scale | [0.0-10.0]            | 定义最大缩放比例，它必须大于或等于minimum-scale设置 |

| user-scalable | yes （1）/ no（0）    | 定义是否允许用户手动缩放页面，默认值 yes            |