在网页中，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. TestNG+extentReports+log4j2 完善自动化测试框架——美观的报告和保留日志文件

    1:导入Maven依赖<dependency> <groupId>com.aventstack</groupId> <artifactId>extent ...

  2. 推荐Calendar操作日期

    package com.example.demo.Calender; import java.text.SimpleDateFormat;import java.util.Calendar;impor ...

  3. TortoiseGit不用每次输入用户名和密码的方法

    TortoiseGit每次同步代码时,都会让输入用户名和密码,虽然安全,但是自己用有点麻烦. 怎么解决呢?废话不多说,直接上图: 1.设置—编辑本地.git/config 2.在本地.git/conf ...

  4. phpStudy配置sql、oracle---博主摘录

    引用 :https://www.cnblogs.com/myBlogInWork/p/8657125.html 由于工作需要,要用到php+oracle写个项目,故而有了以下内容: 本来以为php有默 ...

  5. c++构造顺序

    1. 静态成员最先构造,按照静态成员初始化顺序,不是类里面的声明顺序 2. 父类构造 3. 非静态成员构造,按照类成员声明顺序,不是逗号初始化成员顺序 4. 自身构造函数 Demo: class Te ...

  6. [CQOI2014]数三角形 题解(组合数学+容斥)

    [CQOI2014]数三角形 题解(数论+容斥) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1328780 链接题目地址:洛谷P3166 BZOJ 350 ...

  7. RabbitMq学习1-介绍、安装和配置

    一.简介 1.MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka,以及阿里开源的RocketMQ       2.AMQP是消息队列的一个协议. 3.Rabbi ...

  8. TMS320F28335——IO控制/定时计操作

    一.实现GPIO控制 1.硬件连接 从电路原理图上看来,LED灯是接在GPIO34 上的. 2.IO设置 2.1设置功能 GPXMUX1/2:功能选择寄存器 GPXMUX1/2    每组 IO 一般 ...

  9. oracle数据的导入导出（两种方法三种方式）

    大概了解数据库中数据的导入导出.在oracle中,导入导出数据的方法有两种,一种是使用cmd命令行的形式导入导出数据,另一种是使用PL/SQL工具导入导出数据. 1,使用cmd命令行导入导出数据 1. ...

  10. linux MySql 主从异步复制

    [root@localhost ~]# hostname master.allentuns ###SLAVE 执行 [root@localhost ~]# sed -i 's@\(HOSTNAME=\ ...