使用<meta>设置响应式

• 通过<meta>配置vieport，实现响应式布局
• 也是移动端的通用适配方案
  • 网页宽度与PC端一致
  • 网页缩放比例与PC端一致
  • 不允许用户自行缩放

viewport

• 由浏览器承载
• 套在网页的外层，但是是隐藏的
• 当把网页放在移动端进行显示时，viewport会把网页进行等比例缩放，适应移动端的设备大小

配置详情

• width：设置宽度
• height：设置高度
• initial-scale：设置默认缩放比例
• user-scalable：设置是否允许用户自行缩放页面
• maximum-scale：设置最大缩放比例
• minimum-scale：设置最小缩放比例

<meta>实现

<meta name='viewport' content = 'width=device-width, initial-scale=1.0, userscalable:no' >