@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. 解决方案：c调用python，PyImport_Import或者PyImport_ImportModule总是返回为空

    下面c_python_utils.h是处理工具函数,test.cpp是测试程序,hello.py是python类 可是当我集成到项目中的时候,PyImport_Import总是返回为空,起初我以为是i ...

  2. java编程内容之开始

    java应用程序开发应该掌握的各方面技术 1.初识java,熟悉Eclipse开发工具 2.java语言基础 3.流程控制,数组,字符串,类与对象 4.接口,继承与多态,类的高级特性 5.Java集合 ...

  3. React Native API之 ActionSheetIOS

    ok!先来演示是下效果: 官网教程:http://reactnative.cn/docs/0.31/actionsheetios.html#content 上代码:引入API组件: import Re ...

  4. 正则表达式提取HTML中img标签的src地址

    一般来说一个 HTML 文档有很多标签,比如“”.“”.“”等, 想把文档中的 img 标签提取出来并不是一件容易的事. 由于 img 标签样式变化多端,使提取的时候用程序寻找并不容易. 于是想要寻找 ...

  5. STL_函数对象01

    1.自定义函数对象 1.1.简单例子: //函数对象 struct StuFunctor { bool operator() (const CStudent &stu1, const CStu ...

  6. Android JNI学习(三)——Java与Native相互调用

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  7. 拓扑排序 Topological Sort

    2018-05-02 16:26:07 在计算机科学领域,有向图的拓扑排序或拓扑排序是其顶点的线性排序,使得对于从顶点u到顶点v的每个有向边uv,u在排序中都在v前.例如,图形的顶点可以表示要执行的任 ...

  8. Python 爬虫-正则表达式

    2017-07-27 13:52:08  一.正则表达式的概念 (1)正则表达式是用来简洁表达一组字符串的表达式,最主要应用在字符串匹配中. 正则表达式是用来简洁表达一组字符串的表达式 正则表达式是一 ...

  9. C#复制文件

    string pLocalFilePath ="";//要复制的文件路径 string pSaveFilePath ="";//指定存储的路径 if (File ...

  10. P3226 [HNOI2012]集合选数

    考虑构造矩阵 1 3 9 27...... 2 6 18 54...... 4 12 36 108...... ...... 发现在这个矩阵上一个合法的集合是一个满足选择的数字不相邻的集合,由于行数列 ...