原文: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. 【网络编程】TCPIP-7-域名与网络地址

    目录 前言 7. 域名与网络地址 7.1 IP 7.2 域名 7.3 DNS 7.4 IP地址与域名之间的转换 7.4.1 利用域名获取IP地址 7.4.2 利用IP地址获取域名 7.4.3 升级版的 ...

  2. noip9

    T1 本次考试最水的一道题,然而我sb,前一个小时,找了一大堆跟题目无关的性质,干脆打了个20pts的表,然后就走了,最后几分钟才看出来,匆匆码出来,结果段错误,然后考试就结束了. 好吧,段错误是UB ...

  3. mpu6050控制舵机云台

    准备材料:2个舵机mg90,云台支架,1个arduino-uno,mpu6050 编程工具:VScode-platformio  or  ArduinoIDE 我使用的是VScode在编辑代码上会更方 ...

  4. Angular Module 共享模块使用 父模块使用多个子模块

      Component.module.ts import {BrowserModule} from '@angular/platform-browser'; import {LocationStrat ...

  5. SpringBoot 指定用户退出登录

    HttpSessionConfig.java package com.meeno.common.session; import com.meenoframework.common.filter.Ses ...

  6. java 内存泄露的几种情况

    内存泄漏定义(memory leak):一个不再被程序使用的对象或变量还在内存中占有存储空间. 一次内存泄漏似乎不会有大的影响,但内存泄漏堆积后的后果就是内存溢出.内存溢出 out of memory ...

  7. 在C#中使用C++编写的类——用托管C++进行封装

    现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...

  8. git新建分支及提交代码到分支

    二.创建分支并提交代码到分支 上述添加成员的方式非常简单,但是如果说每一个小组成员都可以对仓库push内容,就涉及到一个代码的安全和冲突问题了,当多个成员同时在线编辑时容易出现冲突,假设A的代码是有问 ...

  9. 如何用Mybatis逆向工程实现分页查询(更改生成的Example)

    如何用Mybatis逆向工程实现分页查询  一个很简单的方法,如果要mysql实现分页查询的话,执行下述语句即可 select * from table limit (offset)5,(limit) ...

  10. Ant的使用(一)

    <?xml version="1.0" encoding="UTF-8"?> <project name="projectName& ...