Cordova 应用程序未在 Android 上以正确的屏幕分辨率显示答案

【问题标题】：Cordova app not showing at correct screen-resolution on AndroidCordova 应用程序未在 Android 上以正确的屏幕分辨率显示
【发布时间】：2016-10-02 10:33:10
【问题描述】：

我正在尝试在 devicePixelRatio 为 2 的 Android 设备上运行带有全屏画布的 Cordova 应用。为了补偿这个像素比，我在 index.html 的头部添加了<meta name="viewport" content="user-scalable=no width=device-width initial-scale=0.5 minimum-scale=0.5 maximum-scale=0.5" />，但由于某种原因，它在作为应用程序运行时被 Android 忽略了。

window.innerWidth 应该显示 1200（我的平板电脑的宽度（nexus 7））但是 window.innerWidth 仍然是 600，就像比例设置为 1 一样。当我将比例设置为 2 时，window.innerWidth 变为 300 所以我确定标签本身可以工作（只是不是 0.5 设置）。

我还进行了一些测试，看看其他设备/浏览器如何响应：同一台平板电脑上的常规 chrome 浏览器给出了正确的 innerWidth（1200）。在 iPhone SE 上运行应用程序也会得到正确的 innerWidth（640）。

所以问题似乎是作为应用程序运行的 Android 所特有的。

是否有人知道如何强制 Android 以正确的分辨率运行 Webview？

【问题讨论】：

标签： android cordova retina-display screen-resolution

【解决方案1】：

我仍然不确定为什么元标记不起作用，但我找到了一个很好的解决方法：

使画布（在我的情况下应该是内部窗口大小的 100%）是内部窗口尺寸的两倍。
设置画布的style.transform为scale(.5)
将 style.transformOrigin 设置为 top left 以重新对齐

public setCanvasSize(width:number, height:number, pixelRatio:number = 1):void { if (pixelRatio == 1) { this._canvas.width = width; this._canvas.height = height; this._canvas.style.transform = ''; } else { this._canvas.width = width * pixelRatio; this._canvas.height = height * pixelRatio; this._canvas.style.transform = 'scale(' + (1 / pixelRatio) + ')'; this._canvas.style.transformOrigin = 'top left'; } }

【讨论】：