文档章节

常见移动设备的 CSS3 Media Query 整理(iPhone/iPad/Galaxy/HTC

山哥
 山哥
发布于 2016/01/15 17:38
字数 939
阅读 1041
收藏 9
/**
 * iPhone 4/4s landscape & portrait
 */@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3) {

}

/**
 * iPhone 4/4s portrait
 */@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:portrait)  {

}

/**
 * iPhone 4/4s landscape
 */@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:landscape) {


}

/**
 *  iPhone 5/5s landscape & portrait
 */@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {


}

/**
 *  iPhone 5/5s portrait
 */@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s 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 5/5s landscape & portrait
 */@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

}

/**
 *  iPhone 5/5s portrait
 */@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    //iPhone 6 Portrait}
    
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    //iPhone 6 landscape
    
    }@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    //iPhone 6+ Portrait}
    
    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    //iPhone 6+ landscape}
    
    @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    //iPhone 6 and iPhone 6+ portrait and landscape}
    
    @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    //iPhone 6 and iPhone 6+ portrait}
    
    @media only screen and (max-device-width: 640px), 
only screen and (max-device-width: 667px), 
only screen and (max-width: 480px) 
and (orientation : landscape){ 
    //iPhone 6 and iPhone 6+ landscape}
    
/**
 *  Galaxy S3 landscape & portrait
 */@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {

}/**
 *  Galaxy S3 portrait
 */@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {

}/**
 *  Galaxy S3 landscape
 */@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {

}/**
 *  Galaxy S4 landscape & portrait
 */@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}/**
 *  Galaxy S4 portrait
 */@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}/**
 *  Galaxy S4 landscape
 */@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}/**
 *  Galaxy S5 landscape & portrait
 */@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}/**
 *  Galaxy S4 portrait
 */@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}/**
 *  Galaxy S4 landscape
 */@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}/**
 *  HTC One landscape & portrait
 */@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}/**
 *  HTC One portrait
 */@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}/**
 *  HTC One landscape
 */@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}/**
 *  iPad Mini landscape & portrait
 */@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}/**
 *  iPad Mini portrait
 */@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}/**
 *  iPad Mini 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/2 landscape & portrait
 */@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}/**
 *  iPad 1/2 portrait
 */@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}/**
 *  iPad 1/2 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/4 landscape & portrait
 */@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {

}/**
 *  iPad 3/4 portrait
 */@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}/**
 *  iPad 3/4 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 Tab 10.1 landscape & portrait
 */@media(min-device-width: 800px)
and (max-device-width: 1280px) {

}/**
 *  Galaxy Tab 10.1 portrait
 */@media(max-device-width: 800px)
and (orientation: portrait) {

}/**
 *  Galaxy Tab 10.1 landscape
 */@media(max-device-width: 1280px)
and (orientation: landscape) {

}/**
 *  Asus Nexus 7 landscape & 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) {

}/**
 *  Asus Nexus 7 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) {

}/**
 *  Asus Nexus 7 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 HD 7" landscape & portrait
 */@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}/**
 *  Kindle Fire HD 7" 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) {
}/**
 *  Kindle Fire HD 7" 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" landscape & portrait
 */@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}/**
 *  Kindle Fire HD 8.9" 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) {
}/**
 *  Kindle Fire HD 8.9" 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) {

}/**
 *  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
 */@media(max-device-width: 42mm)
and (min-device-width: 38mm) {

}/**
 *  Moto 360 Watch
 */@media(max-device-width: 218px)
and (max-device-height: 281px) {

}


本文转载自:http://segmentfault.com/a/1190000002711737

山哥

山哥

粉丝 248
博文 355
码字总数 136865
作品 0
南京
程序员
私信 提问
『reprint』Pixel distortion

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现...

波利beryl
2014/08/25
11
0
布局设置-Meta标签 and Media(来自bootstrap)

meta and media Meta标签 and Media http-equiv属性 Charset 网页编码 Content-Language 设置网页语言 Refresh 指定的时间刷新页面(秒) Set-cookie 设定页面cookie过期时间,操作cookie跟js操...

透笔度
2016/02/25
1K
0
-webkit-min-device-pixel-ratio的常见值对照

-webkit-min-device-pixel-ratio为1.0 所有非Retina的Mac 所有非Retina的iOS设备 Acer Iconia A500 Samsung Galaxy Tab 10.1 Samsung Galaxy S -webkit-min-device-pixel-ratio为1.3 Google ......

山鹰sniper
2014/10/21
979
0
CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并...

BearCatYN
2014/06/10
89
0
基于物理尺寸的响应式设计

此文改题为“自我超越”更合适些。......实际上,最近几年,出现了一个问题:早在2013年初,也就是我正在写此文的时候,以物理设备为载体的web,我们还拿不出一套精准的设计方案,甚至在较长...

TAT_johnny
2013/04/10
4.9K
12

没有更多内容

加载失败,请刷新页面

加载更多

左边竖条的实现方法

下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div : 1 < div > div> 定义如下通用CSS: 1 2 3 4 5 6 div{ position : relative ; width : 200px ; height ...

前端老手
24分钟前
2
0
java利用ECHARTS.JS在前台显示图表

步骤1: (1)在java后台,使用MSQL分组函数,列出所有线在对应的点的值, (2)组成的Map如图所示: 注意: key为0的value表示X轴需要的数据;key为其他的值表示图表线条的名字,value为x轴的点对应的y...

文文1
27分钟前
6
0
解题博客

https://blog.csdn.net/hk2291976/article/category/9265848

素雷
51分钟前
4
0
linux-ubuntu下使用linuxdeployqt+appimagetool将qt程序打包成xxx.AppImage文件

下文中提及的inuxdeployqt patchelf appimagetool工具及示例下载地址: 链接: https://pan.baidu.com/s/1BGm_btMIe75uW9hOC09Xlg 提取码: 7ayh 需要创建目录及文件 xxx.AppDir xxx.AppDir/Ap...

shzwork
56分钟前
5
0
javascript-ASCII码混合四位随机验证码

// 产生一个随机字符库:数字大写小写的数量是对应的 function randomStr(){ // 产生库 var strData = ""; for(var i=0;i<4;i++){ var num = random(0,9); var az = String.fromCharCode(ra......

ACKo
57分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部