@media兼容iphone4、5、6
在网页中，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的更多相关文章
- @media 适配兼容
/* 兼容iphone4/4s */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } /* 兼容iphon ...
- web app iphone4 iphone5 iphone6 响应式布局 适配代码
在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5.] 那么-webkit-min-device-pix ...
- 【原】iphone6来了，我该做点什么(兼容iphone6的方法)
北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我 ...
- web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码
来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...
- iphone6来了，我该做点什么(兼容iphone6的方法)
北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我 ...
- 移动端常见的不同苹果手机media query汇总
在做手机网站的时候,我经常用百分比布局,但是经常在不同的手机显示的不同 比如说,一样的东西,在iphone4(s).5(s).6.plus中都会有不同显示 有时候也想有为了某个手机单独的做一些效果,来 ...
- CSS3 Media Queries 特性的妙用
第一招: 在网页中,pixel与point比值称为 device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5. 那么-webkit-min-devic ...
- css 兼容各种iPhone
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @m ...
- css 兼容 各类手机的写法 待续
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @m ...
随机推荐
- python每日一练：0014题
第 0014 题: 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { "1":["张三",150,120,100], &q ...
- 复制/etc目录下所有以p开头，以非数字结尾的文件或目录到/tmp/mytest1目录中
cp -r /etc/p*[a-Z] /tmp/mytest1
- Vue 实现手动刷新组件
Vue 实现手动刷新组件:https://www.jianshu.com/p/742142dc95f3
- java基础笔记（11）
css 样式的设置主要有选择器+声明{}:声明里又分为属性和值: 注释代码:/*注释语句*/ 内联式:写在元素开始的标签里:例:<p style = "color:red;font-s ...
- Luogu p2456 二进制方程
这是一道我也不知道我gu了多久的题目 (然鹅还有n多任务没有完成) 反正--我太难了 好了言归正传,题目链接 是一道校内测的题目(现在应该没有人没考了吧?) 思路的话,是神仙并查集√ 觉得虽然并查集很 ...
- 通过编写串口助手工具学习MFC过程——（七）添加Tab Control控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- 简单的物流项目实战，WPF的MVVM设计模式(五)
开始界面 <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowD ...
- C语言scanf的返回值
#include <stdio.h> int main(void) { long num; long sum = 0L; int status; printf("Please e ...
- mysql使用MRG_MyISAM(MERGE)实现水平分表
在MySQL中数据的优化尤其是大数据量的优化是一门很大的学问,当然其它数据库也是如此,即使你不是DBA,做为一名程序员掌握一些基本的优化信息,也可以让你在自己的程序开发中受益匪浅.当然数据库的优化有很 ...
- 2019 计蒜之道 复赛 D. “星云系统”（单调栈）
VIPKID 是在线少儿英语教育平台,网络稳定是在线教育课程质量的红线,VIPKID 为此推出了全球最稳定的教育网络系统 -- "星云系统".星云系统目前建立了覆盖全球 3535 ...