css媒体查询解析dpi与width对比device-width

Question

当谈到使用媒体查询时，我看到max-width和max-device-width经常被用来定位“小屏幕”设备或智能手机，但为什么不使用媒体查询来解决问题呢？

例如，@media screen and (min-resolution: 230dpi)允许我针对一些智能手机编写CSS，比如Galaxy S Glide SGH I927R，它有480x800像素，4英寸(~233ppi像素密度)

相反，我将不得不使用@media screen and (max-device-width: 480px) and (orientation: portrait)和@media screen and (max-device-width: 800px) and (orientation: landscape)。

似乎最小分辨率会为我节省一些时间。我已经读了几篇文章和博客，但我没有看到任何人主张解决。

我肯定有一个明显的疏漏--我不是一个专业的网页设计师--但是使用分辨率的方法有什么“问题”呢？是什么让宽度或设备宽度更适合于“小屏幕”。

到目前为止，我最喜欢的关于宽度和设备宽度的网站是：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

也许我不得不使用800px的最大设备宽度的原因是因为我没有使用元标签视窗。我在上面第3页的文章中读到了以下内容：

“这意味着我们的CSS media查询将匹配”缩小“设备的尺寸，而不是它的实际尺寸(例如: iPhone上的设备宽度为980px，而不是320px)。因此，当你为移动设备优化网页时，第一步是在你的页面上定义一个特定的META标签，以改变/禁用移动浏览器的”放大“行为……”

也许在定义了视区之后，max-device-width会比在媒体查询中使用Resolution更有意义？

Answer 1

CSS-Tricks.com的Chris Coyier和Rentedsmile Web Design的Jamie Bicknell在CSS-Tricks网站上发表了一篇很棒的文章。

我将总结他们的要点，并在底部发布文章的链接。

世界上最流行的分析软件是Google analytics，这就是为什么我们大多数人都如此关注分辨率的原因。不幸的是，这并没有考虑到浏览器窗口的大小，这是我们很多人使用27英寸屏幕、多屏幕、40+设备时唯一要考虑的项目，坦率地说，有多少人曾经使用过整个窗口?我知道我没有。

Chris Coyier指出，只有大约61%的用户在全屏200px的范围内观看，这意味着如果你是“像素完美”，那么在你的消费者眼里，你就不是。你的网站很可能会被破坏。(使用全屏估计为0.85% )

这意味着屏幕分辨率与我们的最终用户的原因完全无关。

请参阅这里的完整文章，以获得完整的细分和插图丰富的分析

http://css-tricks.com/screen-resolution-notequalto-browser-window/