原文: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. 带头撸抽奖系统,DDD + RPC 开发分布式架构!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.咋,撸个项目? 总有粉丝伙伴问傅哥,有没有能上手练习技术的项目,现在学了这么多技术知识.看 ...

  2. NOIP 模拟 $11\;\rm math$

    题解 签到题(然而还是不会) 考虑所有可能的值一定是 \(\in [0,k)\),且一定为 \(gcd(a_1,a_2,...a_n,k)\) 的倍数. 证明: 设 \(tmp=b_1a_1+b_2a ...

  3. python 日期、时间处理,各种日期时间格式/字符串之间的相互转换究竟是怎样的?

    模块函数说明 ''' date 日期对象,常用的属性有year,month,day time 时间对象,常用的属性有hour,minute,second,毫秒 datetime 日期时间对象,常用的属 ...

  4. C#协作试取消线程

    https://segmentfault.com/q/1010000017109927using System; using System.Collections.Generic; using Sys ...

  5. xxx.pch(No such file or directory)

    今天在写一个组件的Demo,发现把一个现象. 我把stdafx.h和stdafx.cpp从工程删除了(本地也被我删除了).后来又想把它加回去,就用新的工程生成这两个文件.然后拷贝过来,增加到工程. 但 ...

  6. springCloud实战

    背景 -------------------------学前必读---------------------------------- 学习不能快速成功,但一定可以快速入门整体课程思路:1.实践为主,理 ...

  7. mfc HackerTools监控键盘按键

    string GetKey(int Key) { string KeyString = ""; //判断符号输入 const int KeyPressMask = 0x800000 ...

  8. STM32+Air202+Air530+HXDZ-30102-ACC心率血氧GPS采集上传到阿里云

    所有资料都在QQ群1121445919 主要功能 HXDZ-30102-ACC采集心率血氧数据 STM32通过串口将数据转发到air202模块 air202将数据上传到阿里云平台进行展示与处理 整合合 ...

  9. 自旋锁&信号量

    1. 自旋锁 Linux内核中最常见的锁是自旋锁.一个自旋锁就是一个互斥设备,它只能有两个值:"锁定"和"解锁".如果锁可用,则"锁定"位被 ...

  10. js获取文件名和后缀名