【原】CSS3 Media在常用设备的设置值

摘要：今天的一个小小的项目中，在各种手机上样式都显示正常，唯独iphone4s的有些许问题。产品经理又说iphone4s用户还挺多的，无奈，只能查一查iphone4s的media值，顺便做个小小总结;

直接上代码：

手机

iphone

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 480px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 320px)

  and (max-device-width: 568px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */

@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: portrait) { 

}

/* Landscape */

@media only screen

  and (min-device-width: 375px)

  and (max-device-width: 667px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 736px)

  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 736px)

  and (-webkit-min-device-pixel-ratio: 3)

  and (orientation: portrait) { 

}

/* Landscape */

@media only screen

  and (min-device-width: 414px)

  and (max-device-width: 736px)

  and (-webkit-min-device-pixel-ratio: 3)

  and (orientation: landscape) { 

}


Galaxy phone

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 2)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 2)

  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 320px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: landscape) {

}

HTC phone

/* ----------- HTC One ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 360px)

  and (device-height: 640px)

  and (-webkit-device-pixel-ratio: 3)

  and (orientation: landscape) {

}

平板

Ipads

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: portrait)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: landscape)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: portrait)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: landscape)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: portrait)

  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */

@media only screen

  and (min-device-width: 768px)

  and (max-device-width: 1024px)

  and (orientation: landscape)

  and (-webkit-min-device-pixel-ratio: 2) {

}

Galaxy Tablets

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */

@media

  (min-device-width: 800px)

  and (max-device-width: 1280px) {

}

/* Portrait */

@media

  (max-device-width: 800px)

  and (orientation: portrait) { 

}

/* Landscape */

@media

  (max-device-width: 1280px)

  and (orientation: landscape) { 

}

Asus Tablets

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */

@media screen

  and (device-width: 601px)

  and (device-height: 906px)

  and (-webkit-min-device-pixel-ratio: 1.331)

  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */

@media screen

  and (device-width: 601px)

  and (device-height: 906px)

  and (-webkit-min-device-pixel-ratio: 1.331)

  and (-webkit-max-device-pixel-ratio: 1.332)

  and (orientation: portrait) {

}

/* Landscape */

@media screen

  and (device-width: 601px)

  and (device-height: 906px)

  and (-webkit-min-device-pixel-ratio: 1.331)

  and (-webkit-max-device-pixel-ratio: 1.332)

  and (orientation: landscape) {

}

Kindle Fire

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 800px)

  and (max-device-width: 1280px)

  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */

@media only screen

  and (min-device-width: 800px)

  and (max-device-width: 1280px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 800px)

  and (max-device-width: 1280px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */

@media only screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */

@media only screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: portrait) {

}

/* Landscape */

@media only screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1.5)

  and (orientation: landscape) {

}

笔记本电脑

LapTaps

/* ----------- Non-Retina Screens ----------- */

@media screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- Retina Screens ----------- */

@media screen

  and (min-device-width: 1200px)

  and (max-device-width: 1600px)

  and (-webkit-min-device-pixel-ratio: 2)

  and (min-resolution: 192dpi) {

}

可穿戴设备

Apple watch

/* ----------- Apple Watch ----------- */

@media

  (max-device-width: 42mm)

  and (min-device-width: 38mm) { 

}

Moto 360 Watch

/* ----------- Moto 360 Watch ----------- */

@media

  (max-device-width: 218px)

  and (max-device-height: 281px) { 

}

微信页面的适配

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}

@media only screen and (max-device-width :480px){ }

@media only screen and (min-device-width :481px){ }

/**/

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/

@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

参考： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【原】CSS3 Media在常用设备的设置值的更多相关文章

使用CSS3 @media 设置页面自适应
参考CSS3 @media 查询如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...
[转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
css3 media媒体查询器用法总结兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
CSS3@media媒体查询
CSS3@media媒体查询定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
转: CSS3 @media 用法总结
一.首先是<meta>标签 <meta name="viewport" content="width=device-width, initial-sca ...
css3 media媒体查询器用法总结（附js兼容方法）
css3 media媒体查询器用法总结标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

随机推荐

【JavaEE企业应用学习记录】验证配置
package sanglp; import com.opensymphony.xwork2.ActionSupport; import com.opensymphony.xwork2.validat ...
[转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
iOS不得姐项目--封装状态栏指示器(UIWindow实现)
一.头文件 #import <UIKit/UIKit.h> @interface ChaosStatusBarHUD : NSObject /** 显示成功信息 */ + (void)sh ...
ES6新特性：let和const的使用
(声明, 本文的所有代码均在node的最新稳定版本v4.4.3中执行的, 如果在浏览器中执行请把JS的运行环境提升为ES6) 以前一直用var定义变量, 现在有了两种新的定义变量的方式, 1: let ...
使用android studio时提示Unable to access Android SDK add-on list
这个界面不用管,点击Cancel.到一个界面下边有个”Android SDK Location:“这个选路径的时候选你的android sdk的路径就好了.以后再打开就不会再报这个错了.
Java反编译插件JadClipse
Java反编译是很容易的,现在就介绍一个反编译插件,以后我们通过Ctrl+鼠标左键查看源码就容易得多了,不用再担心源码找不到了,配置过程很简单的. 准备: 1.下载JadClipse(jar文件,ec ...
MAC OS VPN使用指南
L2TP/IPSec VPN - Mac OS 使用指南一.打开Mac的联网设置. 二.然后点左边的加号,添加新的连接. 三.选择VPN(L2TP),点击创建(Create). 四.输入你购买的VP ...
[学习笔记]概率&期望
概率的性质非负性:对于每一个事件$A,0\;\leq\;P(A)\;\leq\;1$. 规范性:对于必然事件$S,P(S)=1$;对于不可能事件$A,P(A)=0$. 容斥性:对于任意两个事件$A, ...
kali2016.2源
最近中科大的源出了问题,官方源又会重定向到意大利. 一下源目前亲测可用:kali2016.2源清华大学 deb http://mirrors.tuna.tsinghua.edu.cn/kali ka ...
【bzoj2006】 NOI2010—超级钢琴
http://www.lydsy.com/JudgeOnline/problem.php?id=2006 (题目链接) 题意给出一个数列,在其中选出K个长度在${[L,R]}$之间的不同的区间,使得 ...