@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. 如何加速tomcat启动速度

    在tomcat启动的时候,我们可以做一些优化设置来使得tomcat的启动更快速,下面是一些常见的优化加速启动的方法建议(以tomcat-7.+为例说明). 1.  Jars包 1.1.将一些不必要的j ...

  2. Ubuntu 14.04下 Java通用安装方法

    参考: 解决Floodlight1.2+Mininet问题及使用安装 Ubuntu下安装JDK1.7图文详解 Ubuntu 14.04下 Java通用安装方法 1.到oracle官网下下载对应jdk包 ...

  3. Vim简本

    参考链接:http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/ 本文将更简化,只保留其中的精华部分. Level One — ...

  4. wireshark 下载

    https://www.wireshark.org/download/win64/

  5. 退出shell 脚本

    #!/bin/bash export TOP_PID=$$ trap 'exit 1' TERM exit_script(){ kill -s TERM $TOP_PID } echo "b ...

  6. Beta冲刺

    第一天 日期:2018/6/24 1 今日完成任务情况. 妥志福.牛瑞鑫: 完成任务:数据库设计完成数据导入成功 王胜海.马中林: 完成任务:代码规范检查 董润园.邓英蓉: 完成任务:平台基本功能黑盒 ...

  7. URAL 1513 Lemon Tale

    URAL 1513 思路: dp+高精度 状态:dp[i][j]表示长度为i末尾连续j个L的方案数 初始状态:dp[0][0]=1 状态转移:dp[i][j]=dp[i-1][j-1](0<=j ...

  8. Confluence 6 连接到一个 LDAP 目录

    https://www.cwiki.us/display/CONFLUENCEWIKI/Connecting+to+an+LDAP+Directory

  9. centos 7安装vmtools时提示The path "" is not a valid path to the xxx kernel headers.

    解决办法: yum -y install kernel-headers kernel-devel gcc reboot

  10. hdu2955（概率DP）

    The aspiring Roy the Robber has seen a lot of American movies, and knows that the bad guys usually g ...