2013-03-12 178 views
3

当谈到使用媒体查询时,我发现最大宽度和最大设备宽度用于定位“小屏幕”设备或智能手机,但为什么不使用使用媒体查询解析?css媒体查询分辨率dpi与宽度与设备宽度的比较

例如,@media screen and (min-resolution: 230dpi)让我写CSS靶向一些智能手机,如Galaxy S的滑翔SGH I927R,其具有480个* 800个像素,4英寸(〜233 PPI像素密度)

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

看来min-resolution会为我节省一些时间。我读过几篇文章和博客,但我没有看到任何人提倡解决问题。

必须有一个明显的观点 - 我不是专业的网页设计师 - 但是使用分辨率的方法会产生什么“错误”?什么使宽度或设备宽度更好地瞄准“小屏幕”。

我最喜欢的网站到目前为止的宽度VS设备宽度一直是: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

也许,我只好用800像素一个最大的设备宽度,这似乎“过度”的智能手机给我的理由是因为我没有使用元标记视口。我在第3页上面的文章中阅读了以下内容:

“这意味着我们的CSS媒体查询将匹配”缩小“设备的尺寸,而不是其实际尺寸(即:980像素的设备宽度iPhone,而不是320px)因此,无论何时优化移动设备的网页,第一步都是在页面上定义特定的META标记,以更改/禁用移动浏览器的“放大”行为...“

也许在定义视口之后,最大设备宽度会比在媒体查询中使用分辨率更有意义?

+0

应该适用于一个设备是什么风格的是800像素宽,使得*不应*适用于桌面浏览器这是800像素宽?什么样的风格应该适用于230dpi的设备,而不适用于96dpi的设备?什么样的风格应该适用于800像素宽的景观导向设备,而不适用于800像素宽的桌面浏览器? – cimmanon 2013-03-13 00:32:50

+0

230dpi似乎只影响我的智能手机,但不是我的桌面浏览器,这使我认为分辨率会最好,但当我切换到使用最大设备宽度时,我发现我必须使用800像素或它会媒体查询不适用于横向的智能手机。我认为智能手机的像素密度要高于桌面浏览器,但我可能会混淆两个主题。我无法弄清的是,为什么最小分辨率230dpi仅适用于我的智能手机而不适用于我的桌面浏览器? – user2163191 2013-03-13 15:11:19

回答

1

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

我将总结他们的主要观点并发布链接到文章底部。

世界上最流行的分析软件是谷歌分析,这就是为什么我们大多数人都非常在意分辨率。不幸的是,这并没有考虑到浏览器窗口大小,这是我们许多人使用27英寸屏幕,多屏幕,40多种设备时唯一考虑的因素,坦率地说,有多少人曾经使用过整个窗口?我知道我

克里斯Coyier指出,只有约61%的用户在200像素以内的全屏显示,如果你是'像素完美',那么在你的消费者眼中 - 你不是。有可能被打破。(使用全屏估计有0.85%)

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

看到完整的文章在这里为他们的全面崩溃和插图丰富的分析

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