iPads和iPhones的Media Queries（转载）

最新推荐文章于 2025-09-12 14:39:04 发布

转载最新推荐文章于 2025-09-12 14:39:04 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/junxtx/p/4478860.html

文章标签：

#前端 #ViewUI

本文提供了一份CSS3 Media Queries模板，适用于不同版本的iPad和iPhone设备，帮助开发者根据不同设备尺寸和分辨率调整网页样式。模板覆盖了从iPad 1到iPad 5、iPad mini、iPad 3、iPad 4、iPad 1和iPad 2等设备，以及iPhone 5、iPhone 2G-4S等设备，详细说明了如何使用Media Queries进行精细化布局。

CSS3 Media Queries是一个强大的媒体查询功能，他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现，Media Queries的功能是越来越得到前端人员的亲眯。

我也不另外，跟着这股时尚流行风，从接触到学习，紧接的到应用，对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries，W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多，特别是苹果公司的系列产品型号的增加，给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦，在互联网上搜集了相关的资料，专门针对苹果的iPads和iPhones的Media Queries模板，希望这些模板能帮助大家减少在网上查找的时间。

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*/ }
注明出处：http://www.w3cplus.com/css3/css-media-queries-for-iPads-and-iPhones.html

转载于:https://www.cnblogs.com/junxtx/p/4478860.html