移动Web开发基础概念

 

 

  

物理像素=设备像素

css像素=逻辑像素=设备独立像素=实际开发中使用的像素

.box{
    width:200px;
    height:100px;
}

 

 

 

设备像素比 dpr = 设备像素 / css像素 （缩放比为1的情况）

dpr 描述的是单方向，因此当dpr=2，意味着一个css像素由2x2个物理像素来完成

 

标清屏 dpr=1

高清屏 dpr>1

 

缩放

缩放改变的是css像素的大小

如： 缩放=1，则1css像素 = 1 物理像素

        缩放=2，则1css像素 = 2x2 物理像素

 

ppi dpi

每英寸的物理像素点

 

 

 

 

视口

默认情况下视口宽度大约是980px，远大于移动设备宽度

解决方法：将视口宽度调整为设备宽度 width=device-width ，缩放比为1 initial-scale=1，不允许用户缩放 user-scalable=no，最大和最小缩放比为1 maximun-scale=1,minimum-scale=1

移动端标准meta头

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

不过即使这么写了，部分国外浏览器还是会允许用户进行缩放，比如ios的safari

 

通过js获取视口相关数据

获取视口宽度

        console.log(window.innerWidth);
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.getBoundingClientRect().width);

可以得出兼容性写法：

var viewWidth=document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
        console.log(viewWidth);

 

补充：screen.width 不同浏览器存在不同的解析，有时会获取到设备宽度，有时获取到css宽度，因此不建议使用

 

js获取dpr

console.log(window.devicePixelRatio);