CSS Media Queries for iPads & iPhones
iPhone 5 Media Queries
iPhone 5 in portrait & landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */}
iPhone 5 in landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 5 in portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* STYLES GO HERE */ }
iPhone 2G, 3G, 4, 4S Media Queries
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
iPhone 2G-4S in portrait & landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */}
iPhone 2G-4S in landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 2G-4S in portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { /* STYLES GO HERE */ }
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
Pad Media Queries (All generations - including iPad mini)
Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iPads (iPads 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect for a responsive design.
iPad in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}
iPad 1 & 2 in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad 1 & 2 in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
推荐阅读
-
CSS3媒体查询Media Queries基础学习教程
-
css:Media Queries: How to target desktop, tablet and mobile?
-
CSS3 Media Queries详细介绍和使用实例
-
定义css设备类型-Media Queries图表简介及使用方法
-
CSS3中的Media Queries学习笔记
-
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
-
CSS3媒体查询(Media Queries)介绍
-
css:Media Queries_html/css_WEB-ITnose
-
HTML5实践-使用CSS3 Media Queries实现响应式设计的代码分享
-
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose