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

<meta http-equiv="X-UA-Compatible" content="ie=edge">

# 一、视口的作用

就是让移动设备显示的窗口宽度等于设备的真实宽度 width=device-width，可以正常浏览网页。

# 二、如何使用视口

<meta name="viewport" content="视口的属性" />

视口的属性有哪些？

• height ： 视口的高度

• width ： 视口的宽度

• device-height： 设备屏幕的输出高度

• device-width ：设备屏幕的输出宽度

• initial-scale：初始比例，页面加载时的默认比例 1.0

• user-scalable：指定用户是否可以对页面进行缩放 yes 允许 /no 不允许

• minimum-scale：最小允许缩放的比率 1.0

• maximum-scale：最大允许缩放的比率 1.0

# 三、深入理解

• 移动前端开发之 viewport 的深入理解