移动端布局 - 视口

---

一、什么是视口

视口就是浏览器显示页面内容的屏幕区域.
视口可以分为布局视口, 视觉视口和理想视口

布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口, 用于解决早期的pc端页面在手机上显示的问题.

视觉视口 visual viewport

• 它是用户正在看到的网站的区域.

理想视口 ideal viewport

• 理想视口, 对设备来讲, 是最理想的视口尺寸
• 需要手动添写 meta 视口标签通知浏览器操作

二、meta视口标签

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