移动端web开发（02）

- 移动端浏览器大多基于webkit内核， 对H5+CSS3支持良好

- 手机的屏幕尺寸非常多，不同的移动设备有不同的屏幕尺寸、视口大小

  ```

  设备的屏幕尺寸查询: https://uiiiuiii.com/screen/

  ```

我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是要尽可能的能适配所有

 视口

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

什么是视口？

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

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

大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页，移动端引入了视觉视口、布局视口、理想视口三个概念

 视觉视口

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


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


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

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

 理想视口

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

理想视口 viewport设置：

```

<meta name="viewport"

    content="width=device-width,initial-scale=1.0,user-scalable=no">

```

上面代码将视口的宽度设置为屏幕宽度（设备逻辑像素），默认无缩放，并且也不允许用户缩放。

属性说明:

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