这是关于移动网络的每一篇文章都提到的,但我无处可以找到这个属性究竟是什么衡量的解释.
任何人都可以详细说明这样的查询是什么？
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
我想找到CSS像素和设备像素之间的比例.
编辑:我应该意识到这只是缩放级别.我已经添加了关于缩放级别的规范参考的答案.
CSS像素是我们几乎用于所有事物的单位 - 它是element.style.width,element.clientWidth,element.offsetWidth等的含义.设备像素是浏览器实际绘制的像素.在设备像素中测量一些属性,例如window.screen.width,其是在用户放大时不改变的屏幕尺寸(例如1024).
动机:当用户放大时,我想增加画布的宽度和高度(同时保持style.width和style.height相同的CSS像素值),scale()上下文,并在更加清晰的放大画布上重绘.
我在Surfin的Safari上读过Quirksmode的两个视口故事和高DPI,但他们都没有说如何获得这个比例.到目前为止,我唯一的想法是收集mousemoves并测量event.clientX中的更改除以event.screenX中的更改,或以编程方式创建媒体查询moz--min-device-pixel-ratio,使用getComputedStyle(),测试规则是否匹配,并使用二进制搜索缩小规模.我希望有一种更容易/更可靠的方式.
编辑:我尝试使用@media (-webkit-min-device-pixel-ratio:1)Chrome,Safari和Firefox 4 的查询,显然Webkit将属性视为一个恒定的设备像素到屏幕像素比率(不随缩放而变化),而Firefox 4将其视为设备像素与CSS像素比率(放大时会增加).因此在Firefox 4中,我可以使用二进制搜索发现CSS像素/设备像素比率,但不能使用Webkit.
据我所知，它是“抽象”分辨率与设备物理分辨率之间的比率。所以我测试了一下（在HTC Desire上），物理分辨率是480x800，登出比例是1.5。我添加了一些元素，但它仍然需要精确的480px宽度来填充视口，而我天真的认为它需要“320px”？