Cordova 应用未在 Android 上以正确的屏幕分辨率显示
Cordova app not showing at correct screen-resolution on Android
我正尝试在 Android devicePixelRatio 为 2 的设备上 运行 全屏 canvas 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" />，但由于某些原因，当 运行 作为 app.
时，它被 Android 忽略了
window.innerWidth 应该显示 1200（我的平板电脑（nexus 7）的宽度）但是 window.innerWidth 仍然是 600，就像比例设置为 1 一样。当我将比例设置为 2 时window.innerWidth 变为 300，所以我确定标签本身有效（只是不是 0.5 设置）。
我也 运行 测试一下其他 devices/browsers 的反应：
同一平板电脑上的常规 chrome 浏览器提供正确的 innerWidth（1200）。
运行 iPhone SE 上的应用也给出了正确的内部宽度（640）。
所以这个问题似乎特定于 Android 运行ning 作为一个应用程序。
有人知道如何以正确的分辨率强制 Android 到 运行 Web 视图吗？
我仍然不确定为什么元标记不起作用，但我发现了一个非常有效的解决方法：
- 使 canvas（在我的例子中应该是内部 window 尺寸的 100%）两倍于内部 window 尺寸。
- 将 canvas 的 style.transform 设置为
scale(.5)
- 将style.transform原点设置为
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';
}
}
我正尝试在 Android devicePixelRatio 为 2 的设备上 运行 全屏 canvas 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" />，但由于某些原因，当 运行 作为 app.
window.innerWidth 应该显示 1200（我的平板电脑（nexus 7）的宽度）但是 window.innerWidth 仍然是 600，就像比例设置为 1 一样。当我将比例设置为 2 时window.innerWidth 变为 300，所以我确定标签本身有效（只是不是 0.5 设置）。
我也 运行 测试一下其他 devices/browsers 的反应： 同一平板电脑上的常规 chrome 浏览器提供正确的 innerWidth（1200）。 运行 iPhone SE 上的应用也给出了正确的内部宽度（640）。
所以这个问题似乎特定于 Android 运行ning 作为一个应用程序。
有人知道如何以正确的分辨率强制 Android 到 运行 Web 视图吗？
我仍然不确定为什么元标记不起作用，但我发现了一个非常有效的解决方法：
- 使 canvas（在我的例子中应该是内部 window 尺寸的 100%）两倍于内部 window 尺寸。
- 将 canvas 的 style.transform 设置为
scale(.5) - 将style.transform原点设置为
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';
}
}