原文: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. 题解 Game

    传送门 一有「字典序最大」什么的的就懵了--这题我颓的std 首先可以发现全局最大得分很好统计,我们令它为 \(k\) 然后我们尝试构造方案,但发现无论怎么放都可能会有后效性 发现对于一个位置,可以放 ...

  2. jpa中使用Query判断条件查询

    jpa中使用Query判断条件查询 @Query(value = " select m.* from mining_area as m " + " where 1 = 1 ...

  3. WPF使用PATH来画圆

    WPF使用Path来画圆, 在 WPF 中可以使用 Path (路径) 来画圆,而 Path 支持两种写法:xaml 代码格式.标记格式,这里介绍的是标记格式: 例子: <Path Data=& ...

  4. vue:Missing space before value for key 'components'

    原因是Vue对语法比较严格,而eslint是一个语法检查工具,对语法要求极其苛刻严格,于是就error了 解决办法是关闭eslint的语法规则,找到build/webpack.base.conf.js ...

  5. C#多线程详解(二)

    在上一节介绍了线程的基础知识,下面来研究多线程的优先级 using System; using System.Threading;namespace Test{    class TestThread ...

  6. Spring详解------概述

    1.什么是 Spring ? Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2E ...

  7. vue-bluJavascript - Vue - 插件(swiper、vue-preview)

    swiper swiper是一个支持滑动效果的js插件,它也支持在vue中使用,主要用于移动端的触摸滑动操作.Swiper中文网. 安装和导入插件 npm i vue-awesome-swiper - ...

  8. JavaWeb 三大器--Listener、Filter 和Interceptor 总结

    说明:web.xml的加载顺序是:[Context-Param]->[Listener]->[Filter]->[Servlet],而同个类型之间的实际程序调用的时候的顺序是根据对应 ...

  9. 关于oracle样例数据库emp、dept、salgrade的mysql脚本复杂查询分析

    大家可以自行网上找资源(网上资源比较多,不建议下载我的),也可以在我这里下载: 1.取得每个部门最高薪水的人员名称:正确   一共有4个单位,要进行左外连接 其中一个单位没得员工 SELECT dep ...

  10. Java从文件路径中获取文件名的几种方法

    举例:String fName =" G:\Java_Source\navigation_tigra_menu\demo1\img\lev1_arrow.gif " 方法一: 1 ...