Я создал приложение с помощью PhoneGap для платформы Android. Чтобы компенсировать различные разрешения устройства (dpi) и размеры экрана, размеры всех элементов пользовательского интерфейса были указаны в единицах em. Затем я использую медиазапросы CSS, чтобы установить другой базовый размер шрифта, используя -webkit-device-pixel-ratio. Раньше все работало нормально, и, как и ожидалось, пока я не узнал, что target-densitydpi = device-dpi устарел, webkit и поддержка будет удалена в будущем. Вот мой мета-тег viewport перед удалением target-densitydpi:

<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi">

Я обнаружил, что когда я удаляю target-densitydpi, приложение перестает выглядеть как положено, на самом деле размеры области просмотра резко уменьшаются. Вот скриншоты до и после, сделанные на Xperia L (Android 4.1.2) с шириной 480 пикселей и window.devicePixelRatio 1,5:

перед удалением target-densitydpi:http://imgur.com/c0Vnusk

после удаления target-densitydpi:http://imgur.com/06mnUlJ

Предполагается, что приложение выглядит как прежний скриншот без target-densitydpi, но я действительно растерялся, как этого добиться? Это потребует переписывания значений CSS? Есть ли способ применить target-densitydpi = device-dpi без использования метатега?