window.pixelRatio不工作在Opera。任何替代方案？ [英] window.pixelRatio not working in Opera. Any alternative?

问题描述

我一直在努力使我们的CMS导出有效内容的移动设备。其中一个我们遇到的问题是，新的设备，如iPhone4的拥有更高分辨率的显示器，所以我们需要找到一种方法来正确地呈现在同一页面上使用300dpi的显示屏较旧的设备和新的。到目前为止，我们使用的JavaScript和window.devicePixelRatio为了获得dpi的分辨率，但事实证明这是行不通的歌剧（？）和Opera移动。

任何suggestetions或者一个不同模式的做法？我研究了一下，但未能找到somethig。

感谢

解决方案

我想你可能误解了 devicePixelRatio 真正告诉您本人;惊喜，像素不是一个像素！

当您指定CSS像素大小，你不是的不一定的指定物理像素的大小。相反，CSS PX 单元实际上是一种设备无关的像素（DIP），这是的 相对到设备的DPI：

像素单元是相对于所述观察装置的分辨率，也就是说，最经常的是计算机显示器。如果输出设备的像素密度从一个典型的计算机显示屏的非常不同，用户代理应重新缩放像素值。

基准像素被定义为96DPI（Windows默认的DPI设置），让你的电脑上的，这是事实，1 DIP（CSS PX ）= 1的物理屏幕像素。此外，即使旧的iOS设备有163物理DPI，他们仍然使用1 DIP = 1像素。不过，在326 DPI，1 DIP = 2的屏幕像素，这是iPhone 4的双倍分辨率是什么 devicePixelRatio = 2 告诉你。

因此​​，与风格的iPhone 3和iPhone 4，一个HTML元素之间的差别严格地讲 {宽度：100像素;高度：100像素; } 应该呈现在大致相同的尺寸上较老的设备和更高的DPI iPhone 4，因为它重新调整的像素值。

所以没有理由前人的精力，你必须使用脚本来解释高DPI设备;它应该只是工作。

I have been working on making our CMS export valid content for mobile devices. One of the problems we encountered was that newer devices, like the iphone4 have a higher resolution display so we needed to find a way to render the same page correctly on older devices and newer that use a 300dpi display. So far we used javascript and window.devicePixelRatio in order to get the dpi resolution, but it turns out this is not working in opera(?) and opera mobile.

Any suggestetions or maybe a defferent approach? I researched a bit but was unable to find somethig.

Thanks

解决方案

I think you might misunderstand what devicePixelRatio is really telling you — surprise, a pixel is not a pixel!

When you specify a pixel size in CSS, you're not necessarily specifying a size in physical pixels. Instead the CSS px unit is actually a "device-independent pixel" (DIP), which is relative to the device's DPI:

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

The reference pixel is defined as 96dpi (Windows' default DPI setting), so on your computer, it is true that 1 DIP (CSS px) = 1 physical screen pixel. Additionally, even though older iOS devices have a physical DPI of 163, they still use 1 DIP = 1 pixel. However, on iPhone 4's doubled resolution of 326 DPI, 1 DIP = 2 screen pixels, which is what devicePixelRatio = 2 is telling you.

Thus, speaking strictly of the difference between the iPhone 3 and iPhone 4, a HTML element with the style { width:100px; height:100px; } should render at roughly the same size on older devices and on the higher-DPI iPhone 4 since it rescales the pixel values.

So there is no reason you sould have to use script to account for high-DPI devices; it should just work.

这篇关于window.pixelRatio不工作在Opera。任何替代方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！