原文:https://blog.csdn.net/dear_zx/article/details/82785250

防止链接丢失,复制一下

兼容iphone4/4s:

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphone5 : @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphone6,iphone7,iphone8s : @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphone6 Plus,iphone7 Plus,iphone8 Plus: @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphoneX: @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ } 兼容ipad : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ /* style */ }
兼容ipad横屏 : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ /* style */ }
兼容ipad竖屏 : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ /* style */ }

ios web 媒体查询兼容的更多相关文章

  1. 移动web——媒体查询

    基本概念 响应式开发在没有媒体查询前,也可以通过js来实现,但是人们基本不会考虑,特别繁琐.在出现了媒体查询,才开始逐渐推广响应式.实际开发中,在时间与金钱充足的情况下还是别做响应式,影响性能,维护麻 ...

  2. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  3. 移动WEB开发中媒体查询里的width, device-width, resolution

    /*1.width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px. 当设置viewport width=device-width时,对应的媒体查询中width的值 ...

  4. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  5. 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询

    前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 兼容ie9以下支持媒体查询和html5

    <head> <!-- 让IE8/9支持媒体查询,从而兼容栅格 --> <!--[if lt IE 9]> <script src="https:/ ...

  7. 基于bootstrap框架在ie8以下,兼容媒体查询[css样式]

    <style type="text/css"> /*基于bootstrap框架在ie8以下,兼容媒体查询*/ .row [class^="col-" ...

  8. 响应式web之媒体查询(一)

    HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...

  9. bootstrap在ie8下,兼容媒体查询

    最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...

随机推荐

  1. 软件开发目录规范 ATM框架构建

    软件开发的目录规范 建立文件夹 为了提高程序的可读性与可维护性,我们应该为软件设计良好的目录结构,这与规范的编码风格同等重要.软件的目录规范并无硬性标准,只要清晰可读即可 以ATM购物车项目为例: 首 ...

  2. NOIP 模拟 $22\; \rm f$

    题解 \(by\;zj\varphi\) 对于一个数,如果它二进制下第 \(i\) 位为 \(1\),那么 \(\rm x\) 在这一位选 \(1\) 的贡献就是和它不同的最高为为 \(i\) 的数的 ...

  3. 题解—P2511 [HAOI2008]木棍分割

    这道题第一眼直接一个二分板子把第一问解决掉,然后主要是统计方案. 其实这个方程还不算难推,只要推出来朴素 \(dp\) ,之后的一步一步也很顺理成章,所以这种题主要看能不能静下心来慢慢做. solut ...

  4. 微软官方安装介质Windows10系统安装教程

    微软官方安装介质Windows10系统安装教程 Jasper游戏 发布时间:04-2204:23 小贴士:事前准备 ★ 拥有 Internet 连接 ★ 在计算机.USB 或外部驱动器上拥有足够的可用 ...

  5. 数据结构解析-HashTable

    概要 HashTable也是散列表的一种实现,我们在上一篇解析了HashMap,在这里我们与HashMap做个对比,让你能清晰的了解两者的区别: 散列表 实现方式 数据安全 数据安全实现方式 key\ ...

  6. C++ leetcode接雨水

    双指针算法"接雨水" 链接:https://leetcode-cn.com/problems/trapping-rain-water/ 给定 n 个非负整数表示每个宽度为 1 的柱 ...

  7. 刷题-力扣-剑指 Offer 42. 连续子数组的最大和

    剑指 Offer 42. 连续子数组的最大和 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/lian-xu-zi-shu-zu-de ...

  8. 一个基于activiti审批流程示例,如何与系统整合

    前言 目前市场上有很多开源平台没有整合工作流,即使有,也是价格不菲的商业版,来看这篇文章的估计也了解了行情,肯定不便宜.我这个快速开发平台在系统基础功能(用户管理,部门管理-)上整合了工作流,你可以直 ...

  9. MMM双主-双从读写分离部署

    原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 前期规划 1.1 主机规划 1.2 虚拟IP规划 1.3 用户列表 1.4 整 ...

  10. MySQL-存储引擎-MERGE

    MERGE存储引擎是一组Myisam表的组合,这些Myisam表必须结构完全相同,MERGE表本身并没有数据,对MERGE类型的表可以进行查询.更新.删除操作,这些操作实际上是对内部的Myisam表进 ...