移动端的适配问题

Posted 2020-09-19

设备像素、CSS像素==设备独立像素 这三者的关系

在PC端可以通过 screen.width/height 属性来获取设备独立像素值，在PC端这个值把它当成我们常说的屏幕分辨率（实际上它不是屏幕分辨率，但是由于在PC端设备像素和设备独立像素数值相等，才有这么一个不准确的说法）。但你把浏览器切换到设备模式时，也就是在移动端环境下通过上面的 screen.width/height 获取的不是移动设备的分辨率，而是移动设备的屏宽/高。如：Iphone 5s下 screen.width =320、screen.height = 568。本以为是浏览器里的设备环境没有完全模拟真实的移动设备环境，可是用真机测试时，还是出现同样的结果screen.width =320、screen.height = 568。值得注意的是：不管你手机是否切换到横屏，这两个值还是一样的。所以不管是移动端还是PC端通过screen.width/height 获取的这个值是设备独立像素（CSS 像素），而不是设备的屏幕分辨率，因为设备的屏幕分辨率对于WEB开发者来说是无法通过代码来获得的，是完全透明的。

设备像素比(dpr) = 物理像素 / 设备独立像素

设备像素比也是设备生产的时候设置好的，在javascript中，可以通window.devicePixelRatio获取到当前设备的dpr.

devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等，我魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置。

 

<metaname="viewport"content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0”/>中content所设置的视口，称为布局视口，最大值由浏览器厂商规定 ,可以document.documentElement.clientWidth获取其宽度.

rem

相关链接：http://www.tuicool.com/articles/FjMfuyM；http://www.cnblogs.com/lyzg/p/4877277.html

rem是css3 的一个长度单位 ，相对文档跟元素 html；比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小；