在网页中，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. 【监控笔记】【1.4】Pssdiag和Sqldiag管理器

    --没有实操过,有点复杂,先写上以后有用到再深入研究 统计与诊断数据是任何 SQL故障修复工作的关键所在. 如果没有掌握这些数据,就无法确定数据性能问题的根源.数据表的瓶颈可能并不是由索引问题造成的: ...

  2. MySQL-快速入门（4）MySQL函数

    1.函数包括:数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数. 2.数学函数:绝对值函数.三角函数(正弦函数.余弦函数.正切函数.余切函数等).对数函数.随机数函数. 1& ...

  3. 拦截器Interceptor和过滤器Filter的区别

    (1)过滤器(Filter):当你有一堆东西的时候,你只希望选择符合你要求的某一些东西.定义这些要求的工具,就是过滤器.(理解:就是一堆字母中取一个B) (2)拦截器(Interceptor):在一个 ...

  4. C++中的深拷贝和浅拷贝构造函数

    1,对象的构造在实际工程开发当中是相当重要的,C++ 中使用类就要创建对象,这 就涉及了对象的构造,本节课讲解对象的构造和内存操作方面的问题: 2,实际工程开发中,bug 产生的根源,必然的会有内存操 ...

  5. [BZOJ 3509] [CodeChef] COUNTARI (FFT+分块)

    [BZOJ 3509] [CodeChef] COUNTARI (FFT+分块) 题面 给出一个长度为n的数组,问有多少三元组\((i,j,k)\)满足\(i<j<k,a_j-a_i=a_ ...

  6. Linux下查看日志用到的常用命令

    杀僵尸进程 部分程序员,肯定喜欢下面命令: ps -ef | grep java (先查java进程ID) kill -9  PID(生产环境谨慎使用) kill.killall.pkill命令的区别 ...

  7. 攻防世界--IgniteMe

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/fac4d1290e604fdfacbbe06fd1a5ca39.exe 1.准备 获取 ...

  8. SpringBoot_03mybatisPlus

    注意: mybatisPlus默认加载resources下的mapper文件夹下的xml文件 默认将数据库表的字段用驼峰标识转换成实体类的属性 官方网站: https://mp.baomidou.co ...

  9. css实现斑马线效果

    文本实现斑马线效果 <style> p { font-size: 17px; line-height: 25px; background-color: antiquewhite; back ...

  10. 机器学习-KNN算法详解与实战

    最邻近规则分类(K-Nearest Neighbor)KNN算法 1.综述 1.1 Cover和Hart在1968年提出了最初的邻近算法 1.2 分类(classification)算法 1.3 输入 ...