我试图在Android设备上运行带有全屏画布的Cordova应用,其devicePixelRatio为2。
为了补偿这个像素比率,我在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设置)。
我还进行了一些测试,看看其他设备/浏览器如何响应: 同一平板电脑上的常规chrome浏览器提供正确的innerWidth(1200)。 在iPhone SE上运行应用程序也会提供正确的内部宽度(640)。
因此,问题似乎特定于Android作为应用运行。
有没有人知道如何强制Android以正确的分辨率运行Webview?
答案 0 :(得分:0)
我仍然不确定为什么元标记不起作用,但我找到了一个非常好的工作方法:
scale(.5)
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';
}
}