iPad Media Queries
1、iPad Media Queries (所有版本,包括iPad mini)
iPads从第一代到至今,总共有五代,也就是iPad1~iPad5,以及Mini iPad。而且每一代iPad都具有相应的CSS Media Queries。这些代码能让你在的代码在iPads下更完美。
iPad (landscape和portrait)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* 样式写在这里 */
}
iPad (landscape)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* 样式写在这里 */
}
iPad (portrait)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* 样式写在这里 */
}
2、iPad3和iPad4
iPad3和iPad4具有Retina屏幕技术,如果你想针对Retina屏幕使用@2x的图像,来区别普通屏幕下的显示,那么使用下面的Media Queries会让你很轻松实现。
Retina iPad (portrait 和 landscape)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* 样式写在这里 */
}
Retina iPad (landscape)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* 样式写在这里 */
}
Retina iPad (portrait)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* 样式写在这里 */
}
3、iPad 1 和 iPad 2 Media Queries
上面的满足了高版本,可能你对细节追求的比较高,想让你的Web在低版本的iPad下也能展示的很完美,那么下面的这几段代码能帮助你。
iPad 1 有 iPad 2 (portrait 和landscape)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* 样式写在这里 */
}
iPad 1 有 iPad 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 1 有 iPad 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 mini Media Queries
使用Media Queries还能帮助我们区分iPad和iPad mini,具体的看下面的代码
iPad mini (portrait 和 landscape)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
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 mini Resolution
@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 (portrait)
Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels) Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels) Device-pixel-ratio: 1
iPhone Media Queries
1、iPhone 5 Media Queries
iPhone 5 (portrait 和 landscape)
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* 样式写在这里 */
}
iPhone 5 (landscape)
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* 样式写在这里 */
}
iPhone 5 (portrait)
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* 样式写在这里 */
}
2、iPhone 2G, 3G, 4, 4S Media Queries
iPhone 2G-4S (portrait 和 landscape)
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* 样式写在这里 */
}
iPhone 2G-4S (landscape)
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
/* 样式写这里 */
}
iPhone 2G-4S (portrait)
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
/* 样式写这里 */
}
iPhone 5 Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 568px (CSS Pixels) Screen Width = 640px (Actual Pixels)
Screen Height = 1136px (Actual Pixels) Device-pixel-ratio: 2
iPhone 4/4S Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels) Screen Width = 640px (Actual Pixels)
Screen Height = 960px (Actual Pixels) Device-pixel-ratio: 2
iPhone 2G/3G/3GS Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels) Screen Width = 320px (Actual Pixels)
Screen Height = 480px (Actual Pixels) Device-pixel-ratio: 1
上面Media Queries主要是针对于苹果中的iPad和iPhone设备,而且使用的是px为计算单位,大家也可以将上面的px代码转换成em,详细的可以看看使用em单位创建CSS3的Media Queries。
更新:iPhone6
@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*/
}
特别声明:本文中展示的代码是由@stephentgilbert搜集与整理,详细可以点击CSS Media Queries for iPads & iPhones
如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-media-queries-for-iPads-and-iPhones.html