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

防止链接丢失,复制一下

  1. 兼容iphone4/4s
  2.  
  3. @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ }
  4. 兼容iphone5
  5.  
  6. @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ }
  7. 兼容iphone6iphone7iphone8s
  8.  
  9. @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){ }
  10. 兼容iphone6 Plus,iphone7 Plus,iphone8 Plus
  11.  
  12. @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){ }
  13. 兼容iphoneX
  14.  
  15. @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ }
  16.  
  17. 兼容ipad
  18.  
  19. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ /* style */ }
  20. 兼容ipad横屏
  21.  
  22. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ /* style */ }
  23. 兼容ipad竖屏
  24.  
  25. @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. @ImportResource-SpringBoot使用xml配置Bean

    前言 SpringBoot推荐使用注解的方式去声明bean,但还是提供了xml的方式去加载bean 一.创建要声明为bean的实体类 WzqEntity.java package com; /** * ...

  2. WebStorm怎么设置实现自动编译less文件

    首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后,安装lessc模块 打开cmd控制台 输入下面一行npm ...

  3. 【mysql】mysql简介及高手是如何练成的

    1.什么是mysql  MySQL 是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于Oracle 公司. Mysql 是开源的,可以定制的,采用了GPL 协议,你可以修改源码 ...

  4. linux下静态库的制作

     在我们编写软件的过程当中,少不了需要使用别人的库函数.因为大家知道,软件是一个协作的工程.作为个人来讲,你不可能一个人完成所有的工作.另外,网络上一些优秀的开源库已经被业内广泛接受,我们也没有必要把 ...

  5. Javascript - Vue - webpack中的axios

    导入axios import Vue from "vue";import axios from "axios";import { get } from &quo ...

  6. Linux centos 安装 ftp(Vsftp) 与 设置ftp(Vsftp)

    本文章只是简单搭建,因为公司只须要简单使用,虽然简单但是之前也走了一些弯路,所以决定把过程记录下来. 一.Vsftp安装与卸载 安装:yum install vsftpd 卸载:yum remove ...

  7. WPF路由事件

    ​    这节讲一下WPF中的路由事件(Routed Event). [什么是事件] 在了解路由事件前,我们应先来了解一下什么是事件(Event). 在Windows系统中,像鼠标单击,双击,移动这样 ...

  8. 闭包 panic recover

    闭包=函数+外层变量的引用 recover必须搭配defer使用 defer一定要在可能引发panic的语句之前定义

  9. 2021年哪个低代码平台更值得关注?T媒体盘点国内主流低代码厂商

    2020年圣诞前夜,国内知名创投科技媒体T媒体旗下的T研究发布了2020中国低代码平台指数测评报告.报告除了对国内低代码行业现状进行总结外,还对主流低代码厂商的市场渗透和曝光进行测评. 报告认为,低代 ...

  10. 聊聊spring事务失效的12种场景,太坑了

    前言 对于从事java开发工作的同学来说,spring的事务肯定再熟悉不过了. 在某些业务场景下,如果一个请求中,需要同时写入多张表的数据.为了保证操作的原子性(要么同时成功,要么同时失败),避免数据 ...