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]& ...
随机推荐
- SQL 练习3
查询存在" 01 "课程,可能不存在" 02 "课程的情况(不存在时显示为 null ) SELECT * FROM (SELECT * FROM SC WHE ...
- noip9
T1 本次考试最水的一道题,然而我sb,前一个小时,找了一大堆跟题目无关的性质,干脆打了个20pts的表,然后就走了,最后几分钟才看出来,匆匆码出来,结果段错误,然后考试就结束了. 好吧,段错误是UB ...
- NOIP 模拟 $31\; \rm Game$
题解 很容易求出在没有字典序最大的限制条件下的最多胜利场数. 这样就可以对于每一位放最优的解,怎么做,二分答案. 分两种情况,一种是当前一位是输的,一种是赢的,复杂度 \(\mathcal O(\rm ...
- 异步编程async体会
namespace 异步编程{ class Program { static void Main(string[] args) { Console.WriteLine("mian this ...
- 在Spring中使用静态工厂时发生的无法得到对象的问题
因为我测试时,使用的是之前的包Spring 3.x一类的jar包,发现我的代码毫无问题,但是就是运行不出来,后面去Spring官网上发现,JDK6+至少都要使用Spring4.x了,而为了配合JDK8 ...
- 一些Java知识点
1 import java.util.ArrayList; 2 3 public class Main { 4 5 public static void main(String[] args) { 6 ...
- div 居中显示
<html lang="en"> <head> <meta charset="UTF-8"> <title>di ...
- Linux下Oracle新建用户并且将已有的数据dmp文件导入到新建的用户下的操作流程
Oracle新建用户并且将已有的数据dmp文件导入到新建的用户下的操作流程 1.切换到oracle用户下 su - oracle 2.登录sqlplus sqlplus /nolog 3.使用sysd ...
- k8s笔记0528-基于KUBERNETES构建企业容器云手动部署集群记录-7
Kubernetes Dashboard 创建CoreDNS [root@linux-node1 ~]# kubectl create -f coredns.yaml [root@linux-node ...
- JS 根据id实现局部打印
// 打印初审收费清单 getOrderCostBille(){ var head_str = "<html><head><title> ...