移动端 视区（viewport）

viewport也称视口，PC上是指浏览器窗口的可视区域。

可见视口（visual viewport）：浏览器窗口的可视区域

布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。

width：定义viewport的宽度，有一个特殊值 device-width当前设备的宽度
initial-scale：默认的初始缩放比
设置1.0，和PC端页面的显示比例一致，一比一显示在移动端
user-scalable：是否允许用户自行缩放 1-yes，0-no
maximum-scale：最大缩放比
minimum-scale：最小缩放比

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

移动端的一些样式设置

1. 清除点击高亮效果

   -webkit-tap-highlight-color: transparent;

2. 设置所有的盒子的宽度以边框开始计算
   在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding会使容器的宽度超出屏幕的宽度产生滚动条。

  -webkit-box-sizing: border-box;
  box-sizing: border-box;

3. 清除input默认的样式

  webkit-appearance: none; 

4. 最小宽度、最大宽度的限制

    min-width：300px; //适配小屏幕设备，为了有较好的布局效果。
    max-width：640px;//保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度

5. 物理像素和图标模糊度问题，解决方案，采用压缩图标尺寸的方式来解决。

• 如果是img使用直接设置宽高的方式来压缩。
• 如果是背景使用的是设置background-size的方式来压缩