@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. 关于PATH_INFO

    nginx支持PATH_INFO? 想让nginx支持PATH_INFO,首先需要知道什么是pathinfo,为什么要用pathinfo? pathinfo不是nginx的功能,pathinfo是ph ...

  2. linux awk命令详解--转载

    awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理,然后输出 awk命令形式: awk [-F ...

  3. 《剑指offer》第三十六题（二叉搜索树与双向链表）

    // 面试题36:二叉搜索树与双向链表 // 题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求 // 不能创建任何新的结点,只能调整树中结点指针的指向. #include < ...

  4. ArcGIS API for Windows Phone开发实例(4):点击查看超市信息 --- 关于使用InforWindow

    菩提老王的葡萄架:作品 地址:http://blog.newnaw.com/?p=696

  5. JSP页面出现乱码

    Jsp文件中会出现下面所示的编码指定方式: <%@ page language="java" contentType="text/html; charset=UTF ...

  6. VS2015新建项目时,左侧面板空白的解决方法

    解决办法是: 1.进入"C:\Users\当前用户名(一般为administrator)\AppData\Local\Microsoft\VisualStudio\14.0" 2. ...

  7. 标准API使用小技巧

    以前我始终孜孜不倦的追求完全能满足需求的标准的API,但是在使用的过程中发现,有些API并不能完全完整的满足需求. 导致我一度很纠结. 最后想到一种方式,COPY一份标准的API,然后按照自己的需求改 ...

  8. 装载问题(load)

    装载问题(load) 问题描述: 有一批共n 个集装箱要装上艘载重量为c 的轮船,其中集装箱i 的重量为wi.找出一种最 优装载方案,将轮船尽可能装满,即在装载体积不受限制的情况下,将尽可能重的集装箱 ...

  9. mahout推荐系统

    本章包含以下内容: 首先看一下实战中的推荐系统 推荐引擎的精度评价 评价一个引擎的准确率和召回率 在真实数据集:GroupLens 上评价推荐系统 我们每天都会对喜欢的.不喜欢的.甚至不关心的事情有很 ...

  10. POJ 2109 Power of Cryptography 大数,二分,泰勒定理 难度:2

    import java.math.BigInteger; import java.util.Scanner; public class Main { static BigInteger p,l,r,d ...