不。
为什么?
iPad 和 iPhone 是不同的设备,具有不同的屏幕尺寸、分辨率和不同的像素密度(基于不同的版本/发布 - 请参阅此处)。
Device Screen(res) CSS pixel ratio
iPad (generation 1,2) 1024 × 768 1
iPad (generation 3,4) 2048 × 1536 2
iPhone (gen 1,3G,3GS) 480 × 320 1
iPhone (gen 4,4S) 960 × 640 2
iPhone (gen 5) 1136 x 640 2
iPad 被归类为平板电脑,iPhone 被归类为移动设备,因此您永远无法使用一个媒体查询来完全满足两者或为这两种设备创造理想的体验。
我能做些什么?
一种解决方案是提供一种相当常见的方法,并为 3 级设备类型和/或屏幕宽度/方向提供媒体查询:
基本理论是您需要您的网站或应用程序在尽可能多的设备上可用/可查看,因此请标准化您的方法,而不是错过过多的单个设备和/或制造商。
一个粗略的例子可能是:
@media screen and (max-width:500px) {
/* Mobile styles */
}
@media screen and (min-width:501px) and (max-width:999px) {
/* Tablet styles */
}
@media screen and (min-width:1000px) {
/* Desktop styles */
}
但是对于这三种类型之间的最佳断点的看法存在很大差异,我知道关于此类断点的研究/数据将受到开发人员社区的广泛欢迎。
如果我想专门针对 iOS 设备怎么办?
你可以这样做。一些人提出了满足特定 iOS 设备特定要求的媒体查询(未经测试,但我经常看到它以及我在下面列出的链接):
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
其他人针对 iOS 所做的进一步努力:
一般参考:
警告
我在上面使用了一种示例方法,但是可以通过多种方式应用媒体查询:
@media screen and (max-width:500px) { ... }
@import url(mobile.css) (max-width:500px);
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />