媒体查询平板纵向及下方答案

【问题标题】：Media query tablet portrait and below媒体查询平板纵向及下方
【发布时间】：2013-04-13 22:02:00
【问题描述】：

我知道如何对平板电脑肖像和手机进行媒体查询。但是，是否有可能只有一个媒体查询适用于所有人：平板电脑肖像和手机？

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

}

/* phones */
@media screen and (max-device-width: 640px) { 

}

/* tablets portrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together?
*/

【问题讨论】：

标签： css media-queries

【解决方案1】：

没有。

为什么？

iPad 和 iPhone 是不同的设备，具有不同的屏幕尺寸、分辨率和不同的像素密度（基于不同的版本/发行版 - 请参阅 here）。

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" />

【讨论】：

【解决方案2】：

看看 Detectizr (https://github.com/barisaydinoglu/Detectizr) 它是一个 Modernizr (http://modernizr.com/) 扩展。

此 JS 将向 html 标记添加 CSS 类，以便您无需媒体查询即可定位设备。例如 .phone{} 或 .tablet{}

【讨论】：