在网页中，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. 关于BeautifulSoup4 解析器的说明

    一.解析器概述 如同前几章笔记,当我们输入: soup=BeautifulSoup(response.body) 对网页进行析取时,并未规定解析器,此时使用的是python内部默认的解析器“html. ...

  2. docker 一些命令

    docker的基本命令 (1)创建一个虚拟机:docker-machine create --driver virtualbox default, (2)列出所有虚拟机:docker-machine ...

  3. [转帖]虚拟内存探究 -- 第一篇:C strings & /proc

    虚拟内存探究 -- 第一篇:C strings & /proc http://blog.coderhuo.tech/2017/10/12/Virtual_Memory_C_strings_pr ...

  4. Linux环境安装mongodb

    介绍 上篇介绍了Linux环境下安装Node.js的步骤,紧接着来安装mongodb.另外,推荐我的另一篇 Windows下图文详解Mongodb安装及配置,先在Windows下熟悉下mongodb, ...

  5. dfs(最佳路径)

    http://acm.hdu.edu.cn/showproblem.php?pid=1242 Rescue Time Limit: 2000/1000 MS (Java/Others)    Memo ...

  6. 微信JSSdk实现分享功能

    1. 概述 微信分享服务器的作用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享链接时更友好的展示提供服务.为实现二次分享功能需要使用微信JS-SDK来开发. 微信JS-SDK是微信公众平 ...

  7. Client does not support authentication protocol requested by server; consider upgrading MySQL client

    出现错误 Client does not support authentication protocol requested by server; consider upgrading MySQL c ...

  8. java中的数据类型，基本数据类型及其包装类型

    java中的8大基本类型及其包装类型 1,int--->Integer 2,byte--->Byte 3,short--->Short 4,long--->Long 5,cha ...

  9. 第7天：Django模板使用与表单

    模板的配置 作为web框架,Django提供了模板,用于编写html代码,模板的设计实现了业务逻辑view与现实内容template的解耦.模板包含两部分: 静态部分: 包含html.css.js 动 ...

  10. Java的volatile

    1.同步 同synchronized相比(synchronized通常称为重量级锁),volatile更轻量级 如图,如果变量没有volatile关键字,那么A线程对该变量的改变存储在内存A,B变量不 ...