分享
是一种美德

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

现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点。现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择。不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用。对于开发来说,更是高效率低成本,当然对于追求细致的来说。。。就有点。。。。。好了,下面我们来看看WEB APP怎么区分iphone 4 5 6吧
那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机
iPhone4/4s的分辨率为640960 pixels,DPI为是320480,设备高度为480px
iPhone5的分辨率为6401136 pixels,DPI依然是320568,设备高度为568px
iPhone6的分辨率为7501334 pixels,DPI依然是375667,设备高度为667px
iPhone6 Plus的分辨率为1242×2208 pixels,DPI依然是414*736,设备高度为736px
那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5、iPhone6、iPhone6 Plus使用css
通过 CSS3 的 Media Queries 特性,可以写出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代码~~
方式一,直接写到样式里面

<font face="宋体"><font style="font-size:12px"><font color="Black"><strong><font face="宋体"><font style="font-size:12px"><font color="Black"><strong>@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{}
  
}</strong></font></font></font></strong></font></font></font>

方式二,链接到一个单独的样式表,把下面的代码放在标签里

<font face="宋体"><font style="font-size:12px"><font color="Black"><strong><font face="宋体"><font style="font-size:12px"><font color="Black"><strong><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"></strong></font></font></font></strong></font></font></font>

使用Js

<font face="宋体"><font style="font-size:12px"><font color="Black"><strong><font face="宋体"><font style="font-size:12px"><font color="Black"><strong>//通过高度来判断是否是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);</strong></font></font></font></strong></font></font></font>
赞(1)
转载请注明来源地址:MN乐享 » web app iphone4 iphone5 iphone6 响应式布局 适配代码

评论 抢沙发

评论前必须登录!