ios web 媒体查询兼容
原文: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 媒体查询兼容的更多相关文章
- 移动web——媒体查询
基本概念 响应式开发在没有媒体查询前,也可以通过js来实现,但是人们基本不会考虑,特别繁琐.在出现了媒体查询,才开始逐渐推广响应式.实际开发中,在时间与金钱充足的情况下还是别做响应式,影响性能,维护麻 ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- 移动WEB开发中媒体查询里的width, device-width, resolution
/*1.width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px. 当设置viewport width=device-width时,对应的媒体查询中width的值 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 兼容ie9以下支持媒体查询和html5
<head> <!-- 让IE8/9支持媒体查询,从而兼容栅格 --> <!--[if lt IE 9]> <script src="https:/ ...
- 基于bootstrap框架在ie8以下,兼容媒体查询[css样式]
<style type="text/css"> /*基于bootstrap框架在ie8以下,兼容媒体查询*/ .row [class^="col-" ...
- 响应式web之媒体查询(一)
HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...
- bootstrap在ie8下,兼容媒体查询
最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...
随机推荐
- noip23
T1 好吧,题目很sb,描述告诉你序列无限长,输入格式里告诉你m为序列长度,我:????,选择了相信后者.然后连暴力都挂分,可恶 这题一看就是个毒瘤数据结构题,思索了一下,发现就是个线段树,但我又想到 ...
- SpringBoot快速入门(二)
2.SpringBoot原理分析 2.1.SpringBoot自动配置 Condition Condition 是在Spring 4.0 增加的条件判断功能,通过这个可以功能可以实现选择性的创建 Be ...
- SSM自学笔记(一)
本文内容 Ioc和DI Spring快速入门 Spring配置文件 Spring IoC和DI注解开发 Spring配置数据源 Spring注解开发 Spring整合Junit IoC 和 DI 1. ...
- wait notify的使用
1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写. 2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized 关 ...
- springboot如何使用事物注解方式
1.在启动类Application中添加注解@EnableTransactionManagement import tk.mybatis.spring.annotation.MapperScan; i ...
- jQuery中的子(后代)元素过滤选择器(四、六):nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- c++制表符
1 #include<iostream> 2 using namespace std; 3 int main() 4 { 5 //制表符是8个字符,当在一个制表符开始的位置(明白什么位置是 ...
- sparksql字段类型转换
1.spark sql 计算时,一定要注意精度的问题,一般像金额之类的值,要先转换为double或者 decimal来进行计算了. 一.sql的方式:select shop_id,order_id,s ...
- opencv入门系列教学(五)图像的基本操作(像素值、属性、ROI和边框)
0.序言 每个图像是由一个个点组成的,而这些点可以表示为像素值的形式. 这篇博客里我们将学会: 访问像素值并修改它们 . 访问图像属性 . 设置感兴趣区域(ROI) . 分割和合并图像. 对于图像的基 ...
- 🏆【Alibaba微服务技术系列】「Dubbo3.0技术专题」回顾Dubbo2.x的技术原理和功能实现及源码分析(温故而知新)
RPC服务 什么叫RPC? RPC[Remote Procedure Call]是指远程过程调用,是一种进程间通信方式,他是一种技术的思想,而不是规范.它允许程序调用另一个地址空间(通常是共享网络的另 ...