题

在Android上,有没有一种安全的方法可以在Chrome中获得实际正确的屏幕物理尺寸？如有必要,旧版Chrome和Android可能会被排除在范围之外.

之前的研究

stackoverflow上有很多关于从javascript(或css)中获取设备的实际物理屏幕尺寸的死胡同问题.似乎html api标准化与实际浏览器实现之间没有融合,更不用说浏览器实现依赖于OS api,而OS api依赖于硬件提供正确的信息.

顺便说一下,一些先前的答案是神秘的(2011年等),假设当时普遍存在一定的像素密度,因此无用.其他与webkit相关,而Chrome闪烁可能已经取代了chrome(？)中的webkit.

我想通过将事物限制在Android上的Chrome来探索简单解决方案的存在.

注意

这完全是关于浏览器内部的javascript(或css)解决方案,而不是本机应用程序的解决方案.

我试图将300dpi图像绘制到画布对象,但在Chrome中它显示的质量非常差.当我使用下面的代码时,它没有改进,但那是因为devicePixelRatio与backingStoreRatio(两者都是1)相同.

然后我尝试强制进行一些比率更改并找到以下内容:

• 如果我改变ratio了2并强制缩放代码运行,那么它会以更好的分辨率绘制到画布.
• 如果我改变ratio任何东西大于2(例如3,4,5,6,等等),那么它有可怜的分辨率!

这一切都是在台式计算机上完成的.

如何确保画布以高分辨率绘制？

(代码来自:http://www.html5rocks.com/en/tutorials/canvas/hidpi/)

/**
* Writes an image into a canvas taking into
* account the backing store pixel ratio and
* the device pixel ratio.
*
* @author Paul Lewis
* @param {Object} opts The params for drawing an image to the canvas
*/
function drawImage(opts) { …

我有一些画布，我想在每个（现代）浏览器中以像素完美的方式显示它们。默认情况下，具有高 DPI 屏幕的设备会缩放我的页面，以便所有内容看起来都大小正确，但它破坏了*我画布的外观。

如何确保画布中的一个像素 = 屏幕上的一个像素？最好这不会影响页面上的其他元素，因为我仍然希望例如文本能够针对设备进行适当缩放。

我已经尝试根据 设计画布尺寸window.devicePixelRatio。这使得画布尺寸合适，但内容看起来更糟。我猜这只是在它们已经错误地放大之后缩小它们。

*如果你关心的话，因为画布使用抖动并且浏览器正在执行某种 lerp 而不是最近邻居