Я делаю приложение на Cordova 3.4 и тестирую на Moto X с Android 4.4.2, Samsung Galaxy Ace с Android 2.3 и эмулятором. Я оставляю исходное окно просмотра, созданное кли:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> На css я работаю с относительными размерами:
html { font-size: 62.5%; } p { font-size: 1.4rem; }
Эта работа прекрасна на обоих устройствах, но когда я тестировал на LG G2 с Android 4.2.2, я вижу, что текст меньше. Я протестировал его со всеми версиями Android 4.x на эмуляторе и нашел ту же проблему с версиями от 4.0 до 4.3, а затем обнаружил, что Android 4.4.2 теперь использует Chrome, а ViewPort работает не так.
Основываясь на некоторых статьях, нормальное поведение на экране сетчатки, например, экраны, состоит в том, что ширина css меньше, чем ширина устройства, и это то, как он работает на Android 4.4.2, но с 4.0 до 4.3 работает по-другому. Это сравнение некоторых свойств javascript между 4.4.2 и 4.2.2 с использованием эмулятора, настроенного с этими параметрами: экран: 4.7 ", разрешение: 720×1280, размер: нормальный, коэффициент экрана: длинный, плотность: xhdpi.
4.4.2 - window.devicePixelRatio: 2 - screen.width: 360 - document.width: 360 - window.innerWidth: 360 - document.documentElement.clientWidth: 360 - document.documentElement.offsetWidth: 360 - document.body.clientWidth: 360 4.2.2 - window.devicePixelRatio: 2 - screen.width: 720 - document.width: 720 - window.innerWidth: 720 - document.documentElement.clientWidth: 720 - document.documentElement.offsetWidth: 720 - document.body.clientWidth: 720
Временное решение, которое я пытаюсь использовать, использует медиа-запросы, но я думаю, что это может быть проблемой на планшетах или других устройствах.
html { font-size: 125%; } @media all and (max-width: 400px) { html { font-size: 62.5%; } }
Другим решением может быть проверка версии Android для установки размера шрифта html.
Каков наилучший способ борьбы с этим несоответствием между Android 4.0-4.3 и 4.4?
Я обнаружил проблему при работе с этим предупреждением на консоли: Viewport target-densitydpi is not supported. Поиск об этом предупреждении, я нашел в этом сообщении в блоге, что target-densitydpi устарел.
Проблема заключается в том, что атрибут target-densitydpi=device-dpi указывает target-densitydpi=device-dpi просмотра, чтобы ширина пикселя CSS была равна ширине пикселей устройства. Поскольку экран просмотра Chrome на Android 4.4.2 игнорирует этот атрибут, он масштабирует ширину пикселов CSS.
Удалив этот атрибут, я получил этот результат:
4.2.2 - screen.width: 720 - document.width: 360 4.4.2 - screen.width: 360 - document.width: 360
На Android 4.2.2 screen.width работает не так, как ожидалось, потому что это свойство должно возвращать ширину пикселей устройства, но это не проблема, потому что теперь мой макет выглядит одинаково на Android 4.4.2 и 4.2.2 после target-densitydpi атрибут target-densitydpi (я также удалил альтернативу медиа-запросов, опубликованную в вопросе).