物理像素 是手机有多少个点!! 720*1920
逻辑像素 是软件最高可以达到的像素。 就好比 iphone4 物理像素是 640*960 逻辑像素是 320*480
因为 设备像素比 dpr window.devicePixelRatio
dpr=物理像素/逻辑像素
计算方式 比如720*1280 5.5寸手机
720*720+1280*1280 开方 在除 屏幕尺寸 ppi 约等于 267
ppi小于160 目前也没有多少了
ppi 在 160-380之间 都是 dpr2
大于380 dpr 基本都是3
在 android 开发中常常会使用到手机屏幕密度和屏幕逻辑尺寸来进行屏幕适配,这里就列出常见手机的屏幕参数列表:
像素密度等级 | 逻辑像素密度 | 屏幕像素 | 屏幕尺寸(inch) | 宽逻辑尺寸(dp单位) | 真实像素密度 |
---|---|---|---|---|---|
ldpi-0.75 | 120 | 240*320 | 2.7 | w320dp | 140.55 |
mdpi-1 | 160 | 320*480 | 3.2 | w320dp | 180.27 |
hdpi-1.5 | 240 | 480*800 | 3.4 | w320dp | 274.39 |
xhdpi-2 | 320 | 720*1280 | 4.65 | w360dp | 315.6 |
xhdpi-2 | 320 | 768*1280 | 4.65 | w384dp | 321 |
xxhdpi-3 | 480 | 1080*1920 | 4.95 | w360dp | 445 |
xxxdpi-4 | 560 | 1440*2560 | 5.96 | w360dp | 492 |
viewport 视窗
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
width 宽度等于设备的宽度 device-width
initial-scale 初始缩放比例 设为1.0则将显示未经缩放的Web文档
maximum-scale和minimum-scale 页面缩放比例的最大最小限制。值的范围为0.25至10.0之间。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。
<meta name="format-detection" content="telephone=yes"/ >
telephone的值可为yes/no,用来设置是否将网页上面的电话显示为可拨号码的超链接。
移动手机访问pc网站内容 默认情况下移动端会创建一个980宽的窗口来显示内容 多出的地方将会出现滚动条
只要设置 视窗的大小 等于设备的逻辑像素即可
然后根据设备的逻辑像素开发网页就行拉!!!