移动端布局 —— 视口

视口（viewport） 是移动开发中重要的概念，由苹果公司推出 iPhone 是发明，可以让手机屏幕尽可能完整的显示整个网页。

视口就是浏览器显示页面内容的区域，在移动端，有三种视口：布局视口、视觉视口和理想视口。

1、布局视口

布局视口指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是 768px、980px 或 1024px 等，主要是为了解决早期的PC端页面在手机上显示的问题。

这样的网页在移动端显示时会有横向滚动条，需要用户左右滑动才能查看。

2、视觉视口

视觉视口就是用户能看到的网站的区域。视觉视口的宽度等同于设备屏幕的宽度。

3、理想视口

理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

想要理想视口，我们需要给移动端页面添加 meta 视口标签。

 <!-- 标准的 viewport 设置-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no, maximum-scale=1.0, minimum-scale=1.0,>

width：视口的宽度，设置为 device-width，也就是设备屏幕宽度
initial-scale：初始缩放比，设置为 1，不缩放
maximum-scale：最大缩放比，设置为 1，不缩放
minimum-scale：最小缩放比，设置为 1，不缩放
user-scalable：用户是否可以缩放，设置为 no（或 0），不允许缩放