@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 正则表达式验证邮箱格式是否合规 以及 正则表达式元字符

    package com.ykmimi.testtest; /** * 测试邮箱地址是否合规 * @author ukyor * */ public class EmailTest { public s ...

  2. testlogin

    !/usr/bin/env python coding:utf-8 import requests import unittest import json,urllib class testlogin ...

  3. AtCoder Grand Contest 013 C ：Ants on a Circle

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  4. C++ 重载new和delete

    下边代码对new和delete进行了简单的重载: #include <memory> #include <iostream> #include <cstddef> ...

  5. [原][译][physX]phsyX3.3.4官方文档物理引擎基本概念和例子介绍

    世界和物体: 物理世界包括集合的场景,每个包含的物体称为演员(Actors) 每个场景(Scene)都定义了自己的参考框架包含了所有的时间和空间 在不同的场景,演员不互相影响 演员通常有三种类型:刚体 ...

  6. Centos修改系统语言

    使用man page帮助时,发现居然是中文的,不过想想即便英语再水,也要逼着自己去适应.于是百度找了一下修改系统语言的方法. 首先使用 locale 命令查看当前的系统语言 然后修改时一般有两种方法, ...

  7. 简说Spring事务

    一.事务定义: 事务指逻辑上的一组操作,这组操作要么全部成功,要么全部失败. 二.事务的特性: 1. 原子性 - 指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. 2. 一致性 ...

  8. 《剑指offer》第十题（斐波那契数列）

    // 面试题:斐波那契数列 // 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项. #include <iostream> using namespace std; ...

  9. 新的请求方式 fetch和axios

    参考链接:https://www.javascriptcn.com/read-5840.html axios使用文档: https://www.kancloud.cn/yunye/axios/2348 ...

  10. nodejs 监听文件夹变化的模块

    使用Node.JS监听文件夹变化 fs.watch 其中Node.JS的文件系统也可侦听某个目录的改变, 如fs.watch   其中fs.watch的最大缺点就是不支持子文件夹的侦听,并且在很多情况 ...