设备独立像素
屏幕的大小、屏幕尺寸(别名叫点,是个单位)
获取:window.screen.width / window.screen.height
注意:1、横竖屏切换的时候。真机里的这个值不会改变,但在模拟器里是会切换的
2、在一个点里可以放多个像素
3、这个值是可以被改变的(缩放)
设备像素(物理像素)
屏幕分辨率(实际放的像素值),买手机的时候被告知的像素值
这个值是虚拟的,无法获取
像素比(DPR,这个值无法修改)
缩放的比例=设备像素/设备独立像素
获取:window.devicePixelRatio
iphone 6 举例:
375 * 667 设备独立像素,屏幕尺寸
750 * 1334 设备像素,屏幕分辨率
2 像素比
viewport 视口(可视区窗口) ,通过mete 标签设置
未设置
1、屏幕的宽度一般为980,但不同的型号也会不同
2、真机与模拟器的值也会不同
3、用window.innerWidth/window.innerHeight获取
设置了
content 视口里的相关设置
width 屏幕的宽度
device-width 设备的实际宽度,不设置的时候默认为这个值
数值(不加单位) 不建议设置数字(安卓设备有些不支持,一线互联网公司都不设置)
height 屏幕的高度
device-height 设备的实际高度
数值(不加单位) 一般不设置高度
user-scalable 能否缩放
yes 允许缩放
no 不允许缩放
initial-scale 初始比例(要与最小缩放比例一致),加上这个后并不是把每个元素都缩放了,而是改变了设备独立像素
mininum-scale 最小能够缩放比例
maxinum-scale 最大能够缩放比例
1、如果用缩放的话,就把width与user-scalable去掉
2、用了缩放后,并不是真正的缩放了,而是改变了屏幕的尺寸(设备的独立像素)