你的位置:首页 > 软件开发 > 网页设计 > web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码

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

发布时间:2015-07-29 19:00:22
来源:http://www.phptext.net/article_view.php?id=387------------------------------------------------------------------------------------------- ...

来源:http://www.phptext.net/article_view.php?id=387

------------------------------------------------------------------------------------------------

文章摘要:现在满大街的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的分辨率为640*960 pixels,DPI为是320*480,设备高度为480pxiPhone5的分辨率为640*1136 pixels,DPI依然是320*568,设备高度为568pxiPhone6的分辨率为750*1334 pixels,DPI依然是375*667,设备高度为667pxiPhone6 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{}}

原标题:web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。