物理像素(physical pixel) 也称设备像素(dp:device pixel)
css像素 也称逻辑像素(logical pixel)或者是设备独立像素(dip:device independent pixel)
实际开发中使用的像素,四个物理像素为一个css像素
设备像素比(dpr:device pixel ratio)
dpr = 设备像素/css像素(缩放比是1的情况下)一个方向上的
dpr = 2 表示1个css像素用22个设备像素来绘制
标清手机屏幕 dpr=1
高清手机屏幕 dpr>1
例如: 当前手机屏幕分辨率为1334750,css像素屏幕高宽是667*375,计算设备像素比是多少?(答案:2)---------只能选择一个方向,长和宽都是2
缩放
缩放改变的是css像素的大小
PPI
每英寸的物理像素点(ppi:pixels per inch)或者叫(dpi:dots per inch) 像素密度
视口
<meta name = "viewport" content ="width=device-width">
初始的缩放比
<meta name = "viewport" content ="initial-scale=1">
结合,user-scalable=no,不希望用户缩放
<meta name = "viewport" content ="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
获取视口
var viewWidth = document.documentElement.clientWidth||window.innerWidth||document.documentElement.getBoundingClientRect().width);
//dpr
console.log(window.devicePixelRatio);