在网页中，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. urllib基本库的使用

    get方法的学习 1import urllib.request 2import ssl 3#设置全局证书 4ssl._create_default_https_context = ssl._creat ...

  2. express 实现我猜你喜欢功能

    工具:利用cookie-parser中间件; 原理: 每次访问某一具体的文章,就表明可能客户端对这类文章感兴趣, 将这类文章的标签添加到cookie里,字段是like; 然后退回到含有 我猜你喜欢模块 ...

  3. Python中对 文件 的各种骚操作

    Python中对 文件 的各种骚操作 python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getc ...

  4. Django、Flask、Tornado的区别？

    Django:Python 界最全能的 web 开发框架,battery-include 各种功能完备,可维护性和开发速度一级棒.常有人说 Django 慢,其实主要慢在 Django ORM 与数据 ...

  5. Jpa-Spec oracle函数bitand,instr等扩展

    jpa-spec github: https://github.com/wenhao/jpa-spec 使用这个框架可以简化我们拼条件的复杂度,如下代码: public Page<Person& ...

  6. application详解

    Application对象是HttpApplicationState类的一个实例,Application状态是整个应用程序全局的.本文主要详细介绍Application对象的用法. 一.全局应用程序类 ...

  7. Ubuntu下通过apache建立虚拟主机

    一个搞前端交互的,总会遇到这样那样的,不需要写代码去解决的问题,怎么搞?答:只能去大海里捞,问题很明确但答案不一定靠谱,因为回答的人不用去考虑你是否会给自己系统搞崩溃. 那么我只能把自己经过验证的答案 ...

  8. Java web项目 本地配置https调试

    一.创建密匙 网上有很多教程,就不在此赘述了. 假设最后生成的密匙为tomcat.keystore 密码为123456. 二.配置tomcat 首先,将密匙移到tomcat下根目录下. 进入conf文 ...

  9. CentOS7.6下设置mysql服务开机启动

    在centos7中所有对服务的管理都集中到了systemctl当中,所以服务的启动.关闭.重启.开机启动等等的操作都可以用systemctl. systemctl对服务的管理都是通过配置文件,配置文件 ...

  10. jmeter性能压测瓶颈排查-网络带宽

    问题: 有一台机器做性能压测的时候,无论开多少个线程,QPS一直压不上去,而服务器和数据库的性能指标(主要是CPU和内存)一直维持在很低的水平. 希望帮忙排查一下原因. 过去看了下进行压测的接口代码, ...