web app iphone4 iphone5 iphone6 响应式布局 适配代码

在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。]

那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机

iPhone4/4s的分辨率为640*960 pixels,DPI为是320*480,设备高度为480px

iPhone5的分辨率为640*1136 pixels,DPI依然是320*568,设备高度为568px

iPhone6的分辨率为750*1334 pixels,DPI依然是375*667,设备高度为667px

iPhone6 Plus的分辨率为1242x2208 pixels,DPI依然是414*736,设备高度为736px

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

使用css

通过 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{}

}

方式二,链接到一个单独的样式表,把下面的代码放在<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

//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus

isPhone4inches = (window.screen.height==480);

isPhone5inches = (window.screen.height==568);

isPhone6inches = (window.screen.height==667);

isPhone6pinches = (window.screen.height==736);

上一篇:spring boot集成websocket实现聊天功能和监控功能


下一篇:Spring boot集成Websocket,前端监听心跳实现