当谈到使用媒体查询时,我发现最大宽度和最大设备宽度用于定位“小屏幕”设备或智能手机,但为什么不使用使用媒体查询解析?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标记,以更改/禁用移动浏览器的“放大”行为...“
也许在定义视口之后,最大设备宽度会比在媒体查询中使用分辨率更有意义?
应该适用于一个设备是什么风格的是800像素宽,使得*不应*适用于桌面浏览器这是800像素宽?什么样的风格应该适用于230dpi的设备,而不适用于96dpi的设备?什么样的风格应该适用于800像素宽的景观导向设备,而不适用于800像素宽的桌面浏览器? – cimmanon 2013-03-13 00:32:50
230dpi似乎只影响我的智能手机,但不是我的桌面浏览器,这使我认为分辨率会最好,但当我切换到使用最大设备宽度时,我发现我必须使用800像素或它会媒体查询不适用于横向的智能手机。我认为智能手机的像素密度要高于桌面浏览器,但我可能会混淆两个主题。我无法弄清的是,为什么最小分辨率230dpi仅适用于我的智能手机而不适用于我的桌面浏览器? – user2163191 2013-03-13 15:11:19