Приложение Cordova не отображается при правильном разрешении экрана на Android

Question

Я пытаюсь запустить приложение Cordova с полноэкранным холстом на устройстве Android с соотношением пикселей устройства 2. Чтобы компенсировать этот пиксель, я добавил <meta name="viewport" content="user-scalable=no width=device-width initial-scale=0.5 minimum-scale=0.5 maximum-scale=0.5" /> до головы в index.html, но по какой-то причине он игнорируется 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 в правильном разрешении?

Answer 1

Я до сих пор не уверен, почему метатег не работает, но я нашел способ, который работает вполне нормально:

1. Сделайте холст (который в моем случае должен составлять 100% от размера внутреннего окна) в два раза больше, чем размеры внутреннего окна.
2. установить style.transform холста в scale(.5)
3. установите 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'; } }