视口的概念
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定
布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。
视口标签
理想视口才是我们设计移动web需要的视口，而理想视口就是将布局视口的宽度修改为视觉视口
meta标签
<!-- meta视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
1、content属性 ： 用来设置视口的，width属性就是视口的宽，它可以是任意数字，设为 device-width 表示设备的宽度，这就是我们需要的理想视口，当没有设置时默认会按980px去显示
2、initial-scale : 视口初始的缩放比，可设置为大于0的数字
3、user-scalable : 设置是否允许用户进行缩放，可设置为 yes / no 或 1 / 0
4、maximum-scale : 设置视口的最大缩放比，可设置为大于 0 的数字
5、minimum-scale : 设置视口的最小缩放比，可设置为大于 0 的数字
6、最标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
注意事项：
- ios10 及 ios10+ 设置最大缩放值无效
- initial 和 width 是有冲突的
- initial 和 最小值 是一致的
- 部分安卓机型，不接受width = 具体数值 这样的操作
viewport的width即使设置了固定值 ,但是设置了initial-scale这个属性后，会自动把width变成device-width(即使width不设置，也会默认设置width=device-width)
正常情况下，我们会把初始、最小 、最大都设置为1，不允许用户缩放页面。但是因为maximum无效，后期，我们会通过 js 来禁止缩放
涉及显示的几个概念
物理像素与CSS像素
设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。
分辨率(物理像素)
screen.height //screen.width返回显示设备的信息。
除非调整显示设备的分辨率，否则看作是常量。
(显示)分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平像素数为160个，垂直像素数128个。
分辨率越高，像素的数目越多，感应到的图像越精密。
而在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。
PPI
pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。
手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。
这个数值是多少？按照2010年前苹果公司CEO史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上对视网膜技术的介绍：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。)
一张图带你了解：视网膜屏幕
DPR设备像素比
每个设备都有属于自己的独立像素，通过浏览器的模拟器，我们可以看到，每个设备的独立像素。
DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值：
DPR = 设备像素 / CSS像素(某一方向上)
普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3
因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。
常见移动设备的PPI与DPR
二倍图
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如iphone6 是 750* 1334
我们开发时候的1px 不是一定等于1个物理像素的
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
以iphone6为例，它的物理像素比是2，用css设置一张图片50 * 50的图片，此时在手机上的显示是100 * 100
的分辨率，相当于被拉伸了两倍，图片看起来就很模糊，解决办法是用100 * 100的图，再设置它的宽高为50 * 50。
lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
背景精灵也是，会把精灵图 * 2，但获取它的background-position时，要先把精灵图 / 2,再去量它的位置 , 然后
设置background-size : 宽 / 2 高 / 2 ;
注：背景缩放background-size
background-size: cover : 背景拉伸到能覆盖这个容器
background-size: contain : 背景拉伸，当宽或高其中有一个铺满，就不再拉伸了
初始化
做移动端页面时的初始化：
（1）设置视口标签
（2）引入normalize.css(是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一)
（3）去掉一些移动端的默认模式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*移动端的a标签点击会有高亮效果，需要清除，设置为transparent 完成透明*/
html{ -webkit-tap-highlight-color: transparent ; }
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
html{ -webkit-appearance: none ; }
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
移动开发的技术选型(常见布局)
1、单独做移动开发
通常情况下输入网址，会判断是PC端还是移动端打开，移动端打开就在域名前加 m. ，打开移动端的网页
PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站
– 单独做移动端有下方几个技术方案
（1）、流式布局（宽度设为百分比的形式）
（2）、flex弹性布局（强烈推荐）
（3）、less + rem + 媒体查询 或者 rem + flexible.js (推荐)
（4）、混合布局（推荐）
2、响应式布局
（1）、媒体查询
（2）、bootstrap
移动端技术解决方案
1.移动端浏览器兼容问题
移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
2.移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css：保护了有价值的默认值 / 修复了浏览器的bug / 是模块化的 / 拥有详细的文档
官网地址： http://necolas.github.io/normalize.css/
3.移动端大量使用 CSS3盒子模型box-sizing
传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
移动端可以全部CSS3 盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型
4.移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*移动端的a标签点击会有高亮效果，需要清除，设置为transparent 完成透明*/
html{ -webkit-tap-highlight-color: transparent ; }
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
html{ -webkit-appearance: none ; }
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }