苹果设备媒体查询与分辨率指南-CSDN博客

本文链接：https://blog.csdn.net/John_zhu_linux/article/details/49511249

这篇博客详细列举了各种苹果设备在横屏（landscape）和竖屏（portrait）模式下的媒体查询，包括ipad、ipad Retina、ipad1 & ipad2、ipad mini以及不同型号的iPhone。此外，还专门讨论了ipad mini的分辨率，并概述了iPhone 5、4/4S及2G/3G/3GS的屏幕分辨率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

landscape & portrait

ipad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

ipad Retina

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2) {}

ipad1 & ipad2

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}

ipad mini

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1) {}

iphone 6p & iphone6

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

iphone 5

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}

iphone 2G-4S

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

landscape

ipad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

ipad Retina

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

ipad1 & ipad2

@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

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}

iphone 6p & iphone6

@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 6p

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}

iphone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}

iphone 5

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

iphone 2G-4S

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

portrait

ipad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

ipad Retina

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

ipad1 & ipad2

@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 only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 1) {}

iphone 6p & iphone6

@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 6p

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}

iphone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}

iphone 5

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}

iphone 2G-4S

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

ipad mini resolution

Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)
Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)
Device-pixel-ratio: 1

Resolution

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