1

以下媒体查询在移动设备和计算机上的行为是否完全相同，或者有什么不同？

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

和

@media (max-width: 480px) {
..
}
4

2 回答 2

4

不，他们不会。这是因为device-width不一样width。如果您的媒体查询只是width它们的行为相同，但是当您介绍时，device-width您会得到不同的结果。有关更多信息，请参阅我对这个问题的回答：针对 iPhone iPad 的 CSS 样式表不起作用

于 2012-06-18T22:07:29.503 回答
1

媒体查询本身将表现相同。但是当他们查询不同的东西时，他们很可能会得到不同的答案。

“仅屏幕”通常有效，但少数移动设备将自己归类为“手持”而不是“屏幕”。（我个人的倾向是“只有全部”更好，部分原因是它包括手持设备，部分原因是它也提供了相同的 CSS 来打印和演示 [即投影仪]。）

对于第一个近似值，min/max-width 是逻辑当前窗口（可能已经由用户设置），而 min/max-device-width 是物理屏幕。但是许多移动设备不会返回您在其销售规格中阅读的屏幕尺寸。其中许多包含“视口”的概念......您可以修改（使用 <meta name="viewport" content="...），但通常默认为比实际屏幕尺寸大得多的东西。彻底了解“视口”将澄清（也​​可能回答）您的查询。

此外，由于移动设备的观看距离通常更近，因此它们需要更密集的像素才能提供同等的用户体验。（iPad 的“视网膜”显示器就是这一趋势的例证。）由于像素密度非常高，小物理尺寸无论如何都可能具有显着的大像素尺寸。（我自己的倾向是认为您最终必须在您的媒体查询中考虑密度，以便产生真正合理的结果。）


无论如何，对于保留概念但实施方式不同的媒体查询的替代方案，你可能想看看http://www.ckollars.org/alternative-to-media-queries.html

于 2012-09-28T23:03:23.643 回答