移动端适配原理详解

下面讲的都是移动端适配的原理性内容，觉得没意思的，想要移动端适配方案的，点击下面链接去复制js代码

移动端rem适配，h5适配，1px像素问题

1.设备独立像素   
  与屏幕密度有关,简称dip。即屏幕的大小，屏幕的尺寸(别名叫点，是个单位)
  获取： window.screen.width / window.screen.height
  注意： 1、横竖屏切换时，真机中这个值不会变，但在浏览器手机模拟器里是会切换的。
        2、在一个点里可以放下多个设备像素。
     
2.设备像素
  也叫物理像素，它是显示设备中一个最微小的物理部件。即所谓屏幕分辨率。
  在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个(或更多)物理像素。

3.CSS像素        
  CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。
  CSS像素称为与设备无关的像素，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。

4.设备像素比     
  简称为dpr，定义了物理像素和设备独立像素的对应关系。普通屏dpr值为1。
  设备像素比 ＝ 设备像素 / 设备独立像素；通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。
  window.devicePixelRatio  获取dpr,存在兼容性问题

5.屏幕像素密度   
  简称PPI,是指一个设备表面上存在的像素数量，它通常以每英寸有多少设备像素来计算(PPI)。
  屏幕密度 = 对角线分辨率/屏幕尺寸 

例如 iPhone6
  375 * 667       设备独立像素，屏幕尺寸
  750 * 1334      设备像素，屏分辨率率
  2               设备像素比 dpr=2

viewport            视口,是严格的等于浏览器的窗口,分为以下三类：
visual viewport     可见视口(获取宽 window.screen.width )
layout viewport     布局视口(获取宽 document.documentElement.clientWidth )
ideal viewport      理想视口：布局视口=可见视口

以iphone5 下的Safari来说就是：
  在iphone的320px物理屏幕上(visual viewport)，创建出了一个980px的虚拟窗口(layout viewport).
  注：媒体查询中判断的 @media all and (max-width: 400px)也是判断布局视口的宽度。

 //1.获取设备屏幕的宽 device-width (所谓 visual viewport)
screen.width                               //320 (例如iphone 5)

 //2.获取视口(viewport)的默认宽度(所谓 layout viewport)  
document.documentElement.clientWidth       //980 (默认宽度为 980px或1024px等) 

 //3.获取浏览器可视区域的宽度
window.innerWidth                          //980 (默认宽度为 980px或1024px等) 

document.write(screen.width+"|"+document.documentElement.clientWidth+"|"+window.innerWidth')
 // 1920|1222|1222 (PC端浏览器小窗口打开)
 // 320|980|980    (iphone手机浏览器打开)

说明：目前绝大数移动设备默认视口宽为980px 如果页面宽度大于这个值，绝大多数设备会自动计算缩放比例，使页面完整显示在视口而不出现滚动条

例如元素 A 的css样式 width:490px;   (490*1)
例如元素 B 的css样式 width:980px;   (490*2)
例如元素 C 的css样式 width:1470px;  (490*3)

以上3个元素分别在iPhone手机中的测试：
只有元素A，A占屏幕宽1/2
只有元素B，B正好整个屏幕宽100%
只有元素C，C正好整个屏幕宽100%
A，B，C一起，A占1/3，B占2/3 ，C正好整个屏幕宽100%

移动端适配原理详解

猜你喜欢