Почему мое приложение выглядит меньше на телефонах Android с высоким разрешением?

Question

Я разработал приложение, используя Adobe Phone Gap, в основном проверяя его на мобильном Safari, настольном Firefox и настольном Chrome, но когда я проверил его на устройствах с высоким разрешением Android (HRDS), все мои шрифты и размеры (рассчитанные в REMs) были вдвое меньше.

Я попытался исправить это с помощью:

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx){
    html{
        /*font-size:125%;*/
    }
}

... но в то время как благодаря этому устройства Android HRDs выглядели нормально, теперь устройства iOS HRDs выглядят чрезмерно большими.Каков наилучший способ исправить это несоответствие?Я изучил медиа-запросы, специфичные для Android, но это означало бы добавить около 20 из них, и нет никакой гарантии, что они повлияют конкретно на устройства Android.

Answer 1

Согласно Обсуждение Mike Stamm на CSSconf Проблема была на самом деле в Атрибут Target-DenseDPI В теге Meta Viewsort, который использует Android, но Apple игнорирует.Это должно быть:

<meta name="viewport" content="target-densitydpi=160">

.

Видимо, что решает проблему с большинством устройств Android, (хотя некоторые устройства Android требуют Target-denseDPI= 140 ).

Связано: что видео связано выше, имеет некоторые интересные исторические причины различий в дисплеях iOS и Android.

Answer 2

Добавьте это meta пометьте в своем head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">