@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 ...
随机推荐
- /etc/syscofig/network 修改主机名
[root@mysql ~]# cat /etc/sysconfig/network NETWORKING=yes HOSTNAME=mysql
- & 和 && 区别和联系，| 和 || 区别和联系
& 和 && 区别和联系,| 和 || 区别和联系,实际项目中,什么情况用哪种? 首先,& 和 && 的联系(共同点): & 和 &&a ...
- 网站私有CA证书制作
所谓的网站安全证书 是通过在客户端浏览器和Web服务器之间建立一条SSL安全通道保证了双方传递信息的安全性,而且用户可以通过服务器证书验证他所访问的网站是否真实可靠. 大体步骤: ...
- P2010回文日期
这道题是2016年普及组的题,难度等级为普及-. 这道题仍然是个模拟题.有两种策略:1.枚举回文,看日期是否存在2.枚举日期,看是否是回文.显然,前者要快很多,并且准确.本蒟蒻第一次便使用了后者,bu ...
- [BZOJ 4668]冷战(带边权并查集+启发式合并)
[BZOJ 4668]冷战(并查集+启发式合并) 题面 一开始有n个点,动态加边,同时查询u,v最早什么时候联通.强制在线 分析 用并查集维护连通性,每个点x还要另外记录tim[x],表示x什么时间与 ...
- [LeetCode] 65. 有效数字
题目链接 : https://leetcode-cn.com/problems/valid-number/ 题目描述: 验证给定的字符串是否可以解释为十进制数字. 例如: "0"` ...
- 自己写的SqlHelper,提示在调用"Fill"前,SelectCommand 属性尚未初始化.错误
namespace 操作数据{ class SqlHelper { public DataSet SqlTODs(string cmdstring) { ...
- 简单的物流项目实战，WPF的MVVM设计模式(四)
接下来写ViewModels 创建运单的ViewModel类 public class CreateExpressWindowViewModel: NotificationObject { priva ...
- vue项目1-pizza点餐系统6-路由精讲之复用router-view
1.在主组件展示二级路由的组件内容,在App.vue中添加 <br> <div class="container"> <!-- row 行排列 --& ...
- webpack 中如何使用 vue
1. 安装vue的包: cnpm i vue -S 2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vu ...