第一招：

在网页中，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. Android HandlerThread 源码分析

    HandlerThread 简介: 我们知道Thread线程是一次性消费品,当Thread线程执行完一个耗时的任务之后,线程就会被自动销毁了.如果此时我又有一 个耗时任务需要执行,我们不得不重新创建线 ...

  2. Scala入门系列（十一）：模式匹配

    引言 模式匹配是Scala中非常有特色,非常强大的一种功能. 类似于Java中的switch case语法,但是模式匹配的功能要比它强大得多,switch只能对值进行匹配,但是Scala的模式匹配除了 ...

  3. 》》ajax加蒙版

    在与后台交互时,用时过长.禁止页面操作等,有提示,增强页面体验: $.ajax({ type:'POST',url:url,data:obj,dataType:'json',beforeSend: f ...

  4. (hdu step 8.1.6)士兵队列训练问题(数据结构，简单模拟——第一次每2个去掉1个,第二次每3个去掉1个.知道队伍中的人数&lt;=3，输出剩下的人 )

    题目: 士兵队列训练问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  5. ResourceBundle读取文件学习

    开发中,我们经常需要读取本地文件(properties文件),这样的好处是文件是动态的,可配置的.这时候我们就需要用到ResourceBundle这个类. 这个类属于java.util.*. 这个类的 ...

  6. freemarker常见语法大全

    推荐freemarker系列教程:http://swiftlet.net/archives/category/freemarker FreeMarker的插值有如下两种类型:1,通用插值${expr} ...

  7. 「mysql优化专题」主从复制面试宝典！面试官都没你懂得多！(11)

    内容较多,可先收藏,目录如下: 一.什么是主从复制 二.主从复制的作用(重点) 三.主从复制的原理(重中之重) 四.三步轻松构建主从 五.必问面试题干货分析(最最重要的点) 一.什么是主从复制(技术文 ...

  8. log4go的输出优化

    又看了一些golang的日志包和相关的文章,仔细阅读了go 1.9.2系统提供的log和go-log,产生了对log4go的日志输出进行优化的想法. 结构化与multiwriter log使用mult ...

  9. Jenkins in OpenCASCADE

    Jenkins in OpenCASCADE eryar@163.com Abstract. Jenkins是一个开源软件项目,是基于Java开发的一个持续集成工具,用于监控持续复制的工作,旨在提供一 ...

  10. 利用GDAL进行工具开源化改造

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 为利于项目实施,团队用AE写过一个插件式的工具集,主要包括了数 ...