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

Question

Я пытаюсь запустить приложение Cordova с полноэкранным холстом на Android-устройстве с устройствомPixelRatio 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 на одном планшете дает правильную внутреннюю ширину (1200). Запуск приложения на iPhone SE также дает правильную внутреннюю ширину (640).

Таким образом, проблема кажется специфичной для Android, работающей как приложение.

У кого-нибудь есть ключ к тому, как заставить Android запускать Webview в правильном разрешении?

Answer 1

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

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'; } }