media 响应式布局不同设备适配

在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些Android机型是1.5，在页面中通过window.devicePixelRatio可以获取到。

iPhone4/4s的分辨率为640*960 pixels，DPI为是320*480，设备高度为480px， -webkit-min-device-pixel-ratio:2

iPhone5的分辨率为640*1136 pixels，DPI依然是320*568，设备高度为568px， -webkit-min-device-pixel-ratio:2

iPhone6的分辨率为750*1334 pixels，DPI依然是375*667，设备高度为667px， -webkit-min-device-pixel-ratio:2

iPhone6 Plus的分辨率为1242x2208 pixels，DPI依然是414*736，设备高度为736px， -webkit-min-device-pixel-ratio:3

那么我们只需要判断iphone手机的device-width(设备高，通过window.screen.width获取) 和device-height(设备高，通过window.screen.height获取)值即可区别iPhone4和iPhone5、iPhone6、iPhone6 Plus。

/* iphone X */
@media only screen and (device-width:375px)and(device-height:812px)and(-webkit-device-pixel-ratio:3) {

}

 

 /* 超过某个高度的时候处理 */

@media only screen and (min-device-height: 800px) {

}

 

/* 兼容iphone4/4s */

@media (min-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

}

 

/* 兼容iphone5 */

@media (min-device-height:568px) and (-webkit-min-device-pixel-ratio:2){

}

 

/* 兼容iphone6 */

@media (min-device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */

}

 

/* 兼容iphone6 Plus，iphone7 Plus */

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:3){/* 兼容iphone6 Plus */

}

转载于:https://www.cnblogs.com/happier/p/8022661.html