您的位置：首页 > 产品设计 > UI/UE

CSS3 Media Queries 特性的妙用

2015-06-26 15:15 651 查看
第一招：

在网页中，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为是326，设备高度为480px

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

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

使用css

通过 CSS3 的 Media Queries 特性，可以写出兼容iPhone4和iPhone5的代码~~

方式一，直接写到样式里面

@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{}
}


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


使用JS

//通过高度来判断是否是iPhone 4还是iPhone 5
isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);


移动开发发展飞猛，各种新的设备也不断的出现，我们在向后兼容的同时，也需要不断术向前学习，赶上时代步伐~

参考资料：

iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

在iPhone 4上为视网膜显示屏优化网页图片

第二招

有些时候，我们做手机端的时候不得不考虑横屏的浏览效果。而大多数情况下横屏的style都被无视掉了，可我们把丑陋的一面暴露出来真的好吗？

于是，我想到了下面的方法：

@media screen and (orientation:portrait) {
#tips{ display:none;}/* 提示竖屏隐藏 */
}
@media screen and (orientation:landscape) {
.swiper-container,#preloadarea{display:none;}/* 横屏状态 隐藏的内容*/
#tips{ display:block !important; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; /*水平垂直居中*/font-size:2em; color:#fff; width:40%; height:10%; text-align:center;}/* 提示竖屏显示 */
}


<div id="tips">竖屏才是最佳浏览体验</div>


纯CSS打造，你！值得拥有！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航