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

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

　　iPhone6的分辨率为750*1334 pixels，DPI依然是375*667，设备高度为667px

　　iPhone6 Plus的分辨率为1242x2208 pixels，DPI依然是414*736，设备高度为736px

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

一、用CSS，直接写到样式表里

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

　　}

二、链接到一个单独的样式表，把下面的代码放在<head>标签里

　　/* 兼容iphone4/4s */

　　<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />

　　/* 兼容iphone5 */

　　<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />

　　/* 兼容iphone6 */

　　<link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />

　　/* 兼容iphone6 Plus */

　　<link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />

三、使用JS判断

　　//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus

　　isPhone4inches = (window.screen.height==480);/* 兼容iphone4/4s */

　　isPhone5inches = (window.screen.height==568);/* 兼容iphone5 */

　　isPhone6inches = (window.screen.height==667);/* 兼容iphone6 */

　　isPhone6pinches = (window.screen.height==736);/* 兼容iphone6 Plus */

　　

@media兼容iphone4、5、6的更多相关文章

  1. @media 适配兼容

    /* 兼容iphone4/4s */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } /* 兼容iphon ...

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

    在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5.] 那么-webkit-min-device-pix ...

  3. 【原】iphone6来了，我该做点什么(兼容iphone6的方法)

    北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我 ...

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

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

  5. iphone6来了，我该做点什么(兼容iphone6的方法)

    北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我 ...

  6. 移动端常见的不同苹果手机media query汇总

    在做手机网站的时候,我经常用百分比布局,但是经常在不同的手机显示的不同 比如说,一样的东西,在iphone4(s).5(s).6.plus中都会有不同显示 有时候也想有为了某个手机单独的做一些效果,来 ...

  7. CSS3 Media Queries 特性的妙用

    第一招: 在网页中,pixel与point比值称为 device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5. 那么-webkit-min-devic ...

  8. css 兼容各种iPhone

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @m ...

  9. css 兼容 各类手机的写法 待续

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @m ...

随机推荐

  1. Command line is too long. Shorten command line for testMLDome1 or also for Application default configuration

    在.idea文件夹中,更改workspace.xml文件 加这段语句: <property name="dynamic.classpath" value="true ...

  2. CentOS 6.X Python 2.6升级到Python 2.7 【转】

    前言:一些第三方框架为了降低复杂性,新的版本已经开始不支持旧版本的python,比如Django这个web框架1.8版本及以上仅仅只支持python2.7及以上版本(记忆中是这个1.8版本),pip安 ...

  3. Docker 容器(container)及资源限制

    Container: 既然container是由image运行起来的,那么是否可以理解为container和image有某种关系?先来看张图: 其实可以理解为container只是基于image之后的 ...

  4. Two modules in a project cannot share the same content root报错解决方案

    观察上方是否出现两个同样的项目,删除不需要的那个,我觉得是因为两个项目同时引用一个根目录文件导致的.

  5. vue视图不更新情况详解

    vue视图不更新情况详解:https://www.jb51.net/article/161371.htm

  6. linux 隐藏显示终端光标

    转载:http://blog.chinaunix.net/uid-20682890-id-3180911.html 一.使用shell 的 echo 命令实现. echo -ne <ctrl+v ...

  7. [LeetCode] 140. 单词拆分 II

    题目链接 : https://leetcode-cn.com/problems/word-break-ii/ 题目描述: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符 ...

  8. CodeForces - 714E + POJ - 3666 （dp严格单调递增与非严格单调递增）

    左偏树 炒鸡棒的论文<左偏树的特点及其应用> 虽然题目要求比论文多了一个条件,但是……只需要求非递减就可以AC……数据好弱…… 虽然还没想明白为什么,但是应该觉得应该是这样——求非递减用大 ...

  9. 检验Excel中数据是否与数据库中数据重复

    #region 记录Excel中的重复列 /// <summary> /// 记录Excel中的重复列 /// </summary> /// <param name=&q ...

  10. python数据结构：pandas(1)

    废话不说,直接上干货 一.数据结构 (1)Series:一维数组,与Numpy中的一维array类似.二者与Python基本的数据结构List也很相近.Series如今能保存不同种数据类型,字符串.b ...