@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:480px) and (-webkit-min-device-pixel-ratio:2),(device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s5/5 */

.class{}

}

或者根据不同的手机 引入样式

<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />

<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />

css 兼容 各类手机的写法 待续的更多相关文章

  1. js 兼容各类手机 的写法 待续

    //通过高度来判断是否是iPhone 4还是iPhone 5 isPhone4inches = (window.screen.height==480); isPhone5inches = (windo ...

  2. 浏览器 CSS 兼容写法的测试总结

    做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...

  3. css兼容问题集合

    css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...

  4. ie6 7 8 9 firefox的css兼容问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css兼容问题与实践归纳总结

    css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...

  6. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  7. 自定义微信小程序导航（兼容各种手机）

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  8. js和css兼容问题

    (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" s ...

  9. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java web项目启动进入首页的配置方式（包含过滤跳转首页实现）

    本文为博主原创,未经允许不得转载: 项目启动成功,进入首页的方式,我们往往在web.xml 中通过以下的方式默认进入跳转首页, <welcome-file-list> <welcom ...

  2. 02_Spark Application不同模式下的监控

    监控Spark Application的运行 官方文档: http://spark.apache.org/docs/latest/monitoring.html 1.1 监控方式 Driver Pro ...

  3. ubuntu-server14.04 网络配置

    一.启动网卡 ubuntu server 安装后,ifconfig 发现只有一个lo 和一个p1p1 网卡, 先查看服务器网卡:ifconfig -a ,发现有lo ,p1p1,p2p1,p3p1,p ...

  4. Windows系统下在Eclipse中集成Python

    我现在偶尔开发代码,已经不用Eclipse了,主要原因是查看Jar包中的代码反编译十分不便,项目加载的时候卡,偶尔还会崩溃 用Intellij IDEA和PyCharm 原来的笔记如何在Eclipse ...

  5. Thunder团队--Alpha发布用户报告

    用户数量:12人 以下为用户评论:(注:为了保护用户的姓名权,以下用户名以昵称形式给出.) 用户名(昵称) 用户使用频次 用户评论(以图片展示) 小王 3次 米线 2次 孔小姐 5次 乌乌鸟 2次 永 ...

  6. windows 命令巧用（持续更新）

    netstat -ano netstat -anvb netstat -s -p [tcp|udp|ip|icmp] # 关闭/打开防火墙 netsh firewall set opmode disa ...

  7. android--------Android Studio常见问题以及解决方式

    gradle build的时候出现的问题: Error:Execution failed for task ':app:packageDebug'. Duplicate files copied in ...

  8. Clear The Matrix CodeForces - 903F (状压)

    大意: 给定4行的棋盘以及4种大小的正方形方块, 每种各有一定花费, 每次可以选一种方块放在棋盘上, 棋盘对应格子全变为'.', 求最少花费使得棋盘全部变成'.' 状压基本操作练习, 状态取12位, ...

  9. poj2686 状压dp入门

    状压dp第一题:很多东西没看懂,慢慢来,状压dp主要运用了位运算,二进制处理 集合{0,1,2,3,....,n-1}的子集可以用下面的方法编码成整数 像这样,一些集合运算就可以用如下的方法来操作: ...

  10. python-day8-元组的内置方法

    #为何要有元组,存放多个值,元组不可变,更多的是用来做查询# t=(1,[1,3],'sss',(1,2)) #t=tuple((1,[1,3],'sss',(1,2)))# print(type(t ...