iphone3 :
设备分辨率 : 320*480
屏幕分辨率 : 320*480
iphone4 :
设备分辨率 : 320*480
屏幕分辨率 : 640*960
iphone5 :
设备分辨率 : 320*568
屏幕分辨率 : 640*1136
iphone6 :
设备分辨率 : 375*667
屏幕分辨率 : 750*1334
设备分辨率 : 表示设备的大小
屏幕分辨率:手机屏幕具体有多少个像素组成
屏幕分辨率更大,我们需要解决:1.当我们用低分辨率的图片放到iphone高分辨率的设备下,会模糊;高分辨率图片放到低分辨率设备上会出现锯齿.设计的时候根据屏幕分辨率大小设计,根据不同手机出不同的设计稿从理论上是最好.怎么从程序上实现呢?
window.devicePixelRatio : 屏幕分辨率/设备分辨率 . 可以根据设备不同来调取不同的图片,
主流屏幕分辨率 : 640*960 (设计稿尺寸) 640*1136
viewport:视口,指我们在浏览器中可视的区域.指的是显示HTML页面的大小,和屏幕分辨率以及设备分辨率没有太大关系.默认视口
<meta name="viewport" content="width=device-width , user-scalable=no,initial-scal=1">
高度适配:
通过JS动态设置
background-size : cover