移动web开发--移动端基础、视口、二倍图

1移动端基础

1.1浏览器现状

国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端浏览器，处理webkit内核浏览器即可。

1.2手机屏幕现状

现在移动端设备无论是Android还是iPhone，屏幕尺寸非常多，碎片化严重，分辨率也不同。作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。

1.3常见移动端屏幕尺寸

1.4移动端调试方法

• Chrome DevTools（谷歌浏览器）的模拟手机调试
• 搭建本地web服务器，手机和服务器在同一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

2.视口

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

2.1布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• IOS、Android基本将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面。

2.2视觉视口 visual viewport

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

2.3理想视口 ideal viewport

• 为了网站在移动端有最理想的浏览和阅读宽度而设定
• 需手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

2.4 meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
/* width=device-width 宽度等于设备的宽度 */

2.5 标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大、最小允许的缩放比例1.0

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

3 二倍图

3.1 物理像素和物理像素比

• 物理像素点（分辨率）指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了的。
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
• 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

 3.2 多倍图

• 对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，造成图片模糊
• 在标准的viewport设置中，使用倍图来提高图片的质量，解决在高清设备中的模糊问题
• 通常使用二倍图，因为iPhone6\7\8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
• 背景图片注意缩放问题
• 

3.3 背景缩放 background-size

• background-size：背景图片宽度 背景图片高度；
• 单位：px，%，cover|contain
• 只有一个参数时，指的是宽度，高度会等比缩放
• background-size：cover；【cover等比例拉伸 要完全覆盖div盒子，可能有部分背景图片显示不出来】
• background-size：contain；【contain高度和宽度等比例拉伸 当宽度 或者高度铺满div盒子就不再拉伸，可能有部分空白区域】

3.4多倍图切图 cutterman

3.5二倍精灵图的做法

• 在firework里面吧精灵图等比例缩放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面background-size也要写：精灵图原来宽度的一半