第一招：

在网页中，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:; right:; bottom:; left:; margin:auto; /*水平垂直居中*/font-size:2em; color:#fff; width:40%; height:10%; text-align:center;}/* 提示竖屏显示 */

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

纯CSS打造，你！值得拥有！

CSS3 Media Queries 特性的妙用的更多相关文章

  1. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  2. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  3. CSS3 Media Queries 详解

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  4. CSS3 Media Queries 简介

    原文链接:Introduction to CSS3 Media Queries 原文日期: 2014年2月21日 翻译日期: 2014年2月26日 翻译人员: 铁锚 简介 随着移动设备的日益普及,we ...

  5. 【css】CSS3 Media Queries 详解【转】

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  6. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  7. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  8. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  9. CSS3 Media Queries模板

    使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...

随机推荐

  1. CS Round#50 D min-races

    Min Races Time limit: 1000 msMemory limit: 256 MB   In a racing championship there are N racing driv ...

  2. Linux 多进程多线程相关概念

    进程:可执行程序是存储在磁盘设备上的由代码和数据按某种格式组织的静态实体,而进程是可被调度的代码的动态运行.在Linux系统中,每个进程都有各自的生命周期.在一个进程的生命周期中,都有各自的运行环境以 ...

  3. Java 封装 HDFS API 操作

    代码下载地址:点击下载 一:环境介绍 hadoop:2.6 Ubuntu:15.10 eclipse:3.8.1 二:操作包含 推断某个目录是否存在              isExist(fold ...

  4. Mybatis 入门之resultMap与resultType解说实例

    resultMap:适合使用返回值是自己定义实体类的情况 resultType:适合使用返回值得数据类型是非自己定义的,即jdk的提供的类型 resultMap : type:映射实体类的数据类型 i ...

  5. 《Javascript_Dom 编程艺术》（第2版）读书笔记

    第1章 Javascript 简史 Dom : 平稳退化.渐进增强,以用户为中心的设计 第2章 Javascript 语法 1.程序设计语言分为:解释性(javascript)和编译型(java,C+ ...

  6. iOS 从应用程序跳转到评价界面

    1,跳转到App Store: NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id% ...

  7. ZOJ ACM 1204 (JAVA)

    毕业好几年了,对算法还是比較有兴趣,所以想又一次開始做ACM题.俺做题比較任意,一般先挑通过率高的题来做. 第1204题,详细描写叙述请參考,ZOJ ACM 1204 1)难度分析 这个题目,基本的难 ...

  8. Java项目中使用Redis缓存案例

    缓存的目的是为了提高系统的性能,缓存中的数据主要有两种: 1.热点数据.我们将经常访问到的数据放在缓存中,降低数据库I/O,同时因为缓存的数据的高速查询,加快整个系统的响应速度,也在一定程度上提高并发 ...

  9. MyBatis_延迟加载01

    一.延迟加载 MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时, 按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. MyBatis的延迟加载只是对关联 ...

  10. Ubuntu 下使用 ZTE ME3630 4G 模块

    之前在 AM5728 开发板上使用过这个模块,用来在野外采集数据上传到服务器.最近接触另外一个项目,做一个演示用的样机,需要移动的,也是采用了这个模块来上传数据.样机环境是 Ubuntu 16.04 ...