浏览器中用于呈现网页的区域叫视口（viewport），视口通常不等于屏幕大小
视口就是HTML标签的大小
手机一般的默认视口都是980，但是手机分辨率各不一样，所以移动端默认视口在浏览网页时体验是非常差的

设置视口

  1.  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

width=device-width，将视口大小设置为完美视口
initial-scale=1.0，初始化缩放 = 1，不缩放
maximum-scale=1.0,user-scalable=0，禁止用户放大页面

设备分辨率

设备名 物理分辨率 设备独立像素（理想视口） 像素比
iphone 5 640 x 1136 320 x 568 2
iphone 6 750 x 1334 375 x 667 2
iphone 6 Plus 1080 x 1920 411 x 736 3
iphone X 1125 x 2436 375 x 812 3

css像素和物理像素

在PC端，一般情况下1个css像素对应一个物理像素
但是在移动端，通常情况下1个css像素应该对应多个物理像素，才可以确保网页可以正常的浏览