Web移动端开发中iphone4 iphone5 iphone6 iphone6 Plus适配问题

2018年06月03日

阅读:533

H5前端开发中,如何解决所有iPhone版本和安卓机的适配问题是开发中的重中之重,无论是设计APP还是写前端H5.都是要考虑移动端的兼容性

pixel(象素点)与point(坐标点)比值称为device-pixel-ratio,普通设备都是1,iPhone4是2,有些Android机型是1.5。那么咱们接下来就可以用-webkit-min-device-pixel-ratio:2来区分iphone(4/4s/5)和其它的手机的区别。

iPhone4/4s的分辨率为640*960pixels,DPI为是320*480,设备高度为480px
iPhone5的分辨率为640*1136pixels,DPI是320*568,设备高度为568px
iPhone6的分辨率为750*1334pixels,DPI是375*667,设备高度为667px
iPhone6 Plus的分辨率为1242*2208pixels,DPI是414*736,设备高度为736px

那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5、iPhone6、iPhone6 Plus

方式一,使用CSS3直接写到样式里面

通过CSS3的Media Queries特性,写出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代码

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .class{}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
    .class{}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
    .class{}
}

方式二,使用CSS3链接到一个单独的样式表,把下面的link引用放在<head>标签里

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />
<link rel="stylesheet" media="(device-height: 568px) and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />
<link rel="stylesheet" media="(device-height: 667px) and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />
<link rel="stylesheet" media="(device-height: 736px) and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />

方式三,使用JS通过高度来判断是iPhone4还是iPhone5或iPhone6、iPhone6 Plus

isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);
isPhone6inches = (window.screen.height==667);
isPhone6pinches = (window.screen.height==736);

别逗了好么

努力每一天,奋斗为明天。

文章 981 作品 25,341

热门作品

文章推荐

猜你喜欢

榜上有名

广告