移动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);

 

posted @ 2020-03-14 12:46  陈莺莺呀  阅读(283)  评论(0编辑  收藏  举报