关于移动端分辨率，以及移动设备实现根据屏幕大小自动放大缩小页面达到页面样式统一

一、基础知识——移动设备的像素和dpr知识：
物理像素：一个物理像素是显示器（手机屏幕）上最小的物理显示单元。
设备独立像素：可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。
以上解释较为官方，为了方便理解在这里我通俗解释一下。
物理像素就是显示器上显示的一个最小光点，随着技术越来越成熟，显示器单位面积内能存放的光点越来越多，以前通常液晶显示器的光点密度（ppi）为72，而现在笔记本上的Retina屏可以达到300多ppi。物理像素就是显示器有多少个“光点”。
设备独立像素：即为css像素，由于硬件设备不同，物理像素的密度是不一样的。为了统一，设备独立像素就是计算机的坐标点，无论你物理像素多高，相同尺寸的显示屏，他们独立设备像素是一样的。这样有些设备2个物理像素=1个设备独立像素，而更好的屏幕可能3个物理像素=1个设备独立像素。
dpr概念：设备像素比，即物理像素/设备独立像素的比。

二、获取设备的像素
获取设备独立像素：
screen.width获取的是设备独立像素，不过有些老的安卓机器，该属性返回的是物理像素。
获取dpr：
window.devicePixelRatio
物理像素就是设备独立像素*dpr获得。

三、width=device-width的作用
当我明白以上概念后，我曾经以为物理像素/2就是居中的，例如一个显示屏的物理像素宽度为1080（360独立像素，3dpr），当我写一个div的宽度为540px，经测试发现其右边border并不是在显示屏正中，这个问题困扰了我很久，后来翻阅了很多资料以及测试，发现还有一个viewport概念在里面。
viewport分为visual viewport和  layout viewport
visual viewport这里visual viewport也就是视觉上的窗口，可以理解为设备自己的宽度。
而layout viewport就是html自定义的一个虚拟视觉框，目前它的宽度都是980。
也就是说在html里面有个980宽度的虚拟视觉框。该宽度可以通过document.documentElement.clientWidth获取到！
了解到这点后，我把div的宽度设置为490px后，多个手机测试，div的边框正好在显示屏的正中了。
2、width=device-width
通常情况下，移动端都没有使用980的虚拟视觉框宽度，而是把该宽度设置为设备的独立像素宽度，也就是width=device-width。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
该meta标签表示使虚拟视觉宽度设置为独立设备宽度，同时没有进行缩放，并且不允许用户进行缩放。

四、关于rm和rem深入理解
大家都知道rm和rem初始单位1都是16px，rm是相对父级进行缩放的，而rem是绝对缩放，不受父级影响。以下就以rem举例
查询以前的资料，通常教大家设置html,body{font-size:62.5%}。意思是让1rem=10px，这样就方便换算。
使用该方法，我反复测试，发现各个浏览器的1rem并非是10px，而是12px。后来才想到是因为浏览器默认的最小字号为12px，而rem的设置是通过字号设置的。所以1rem在设置为12px以下时，都是按照12px来计算的。所以通过font-size:62.5%的方式来设置rem并不可靠。

五、关于vw，目前我使用的方式。
vw是视窗单位，是相对单位，它相对的不是父节点或者页面的根节点，而是由viewport视窗大小决定的，1vw代表1%视窗的宽度。这类表示单位还有vh、vmin、vmax。
在设置html的字体大小时我习惯用font-size:calc(100vw / 750 * 100)。该字号设置是以750宽度作为基础设置的viewport。所以1rem=100px。而在iphone6下设备宽度为375，dpr为2倍，所以看起1rem=50px。
通过该种方式设置字号，可以兼容所有显示屏实现等比例放大缩小，不会造成错位问题。
这里需要注意三点：
1、使用该方式设置移动端，一定要添加
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>使viewport宽度设置为设备独立宽度。否则所有viewport永远都是980px。
2、设计稿最好按照750的宽度来设计，也就是iphone6，在做前端开发的时候，也使用iphone6来开发，这样1rem就是50px，便于开发。当然也可以按照其他尺寸，修改font-size的750为其他宽度即可。
3、目前各大主流浏览器已经能够完全是被vw单位，但是老版本浏览器ie8等还是无法正常识别，所以该单位最好使用在移动端或不考虑ie8的PC端。

• 点赞
• 收藏
• 分享
• 文章举报