第一招：

在网页中，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. Hibernate框架进阶（中篇）之多表关系

    导读 Hibernate进阶主要分为上中下三篇,本文是中篇,主要讲解Hibernate框架中多表关系的实现.我们知道多表关系有一对一.一对多(多对一)和多对多三种关系.而1对1关系一般合并为一个表处理 ...

  2. Windows下Tomcat调优

    windows tomcat 优化 1.  tomcat conf server.xml 在server.xml中修改以一部分,增加节点数目,可以很好的提高性能: <Connector port ...

  3. 大数据：Hadoop入门

    大数据:Hadoop入门 一:什么是大数据 什么是大数据: (1.)大数据是指在一定时间内无法用常规软件对其内容进行抓取,管理和处理的数据集合,简而言之就是数据量非常大,大到无法用常规工具进行处理,如 ...

  4. String内存溢出异常（错误）可能的原因及解决方式

    摘要:本Blog主要为了阐述java.lang.OutOfMemoryError:PermGenspace可能产生的原因及解决方式. 当中PermGen space是Permanent Generat ...

  5. SSH2——filter过滤器

    概述: 过滤器是Servlet2.3以上新添加的一个功能,其技术也是很强大的.通过Filter技术能够对WEBserver的文件进行拦截,从而实现一些特殊的功能. 在JSP开发应用中也是必备的技能之中 ...

  6. 蓝牙核心技术概述（五）：蓝牙协议规范（irOBEX、BNEP、AVDTP、AVCTP）

    关键词:蓝牙核心技术协议  irDA BNEP  AVDTP AVCTP 作者:xubin341719(欢迎转载,请注明作者,请尊重版权,谢谢! )欢迎指正错误,共同学习.共同进步!! 下载链接:Bl ...

  7. 【SqlServer】【问题收集】删除同一张表中完全相同的记录

    1   概述 在Sqlserver中,当通过SqlServer设计器删除同一张表中两条完全相同的记录时,会弹出如下提示: 点击“是” 弹出如下提示,不让删除 2   问题解决 这个问题很简单,用DEL ...

  8. .Net6种成员的可访问性

    CLR术语 C#术语 描述 Private private 成员只能由定义类型或任何嵌套类型访问 Family protected 成员只能由定义类型,任何嵌套类型或者不管在任何程序集中声明的派生类型 ...

  9. 37、mysql初识

    之前我们写代码需要存取信息时用的是文件可是用文件存取数据非常局限,今天我们将走进一个新的世界mysql 一.数据库由来 之前所学,数据要永久保存,比如用户注册的用户信息,都是保存于文件中,而文件只能存 ...

  10. 【java】java.lang.Math：public static long round(double a)和public static int round(float a)

    package math; public class TestMath_round { public static void main(String[] args) { System.out.prin ...