Текст и макет приложения Phonegap слишком малы

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

• настройки просмотра target-densitydpi до medium-dpi (=160dpi), как уже предлагалось. Это виртуализирует px единица, например,1px в html / css тогда соответствует 2 физическим пикселям на устройстве 320dpi. Обратите внимание, что изображения также масштабируются (и размываются).

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

• CSS: использование медиа-запросов для реализации условного стиля. Адаптация для различных размеры экрана в зависимости от ширины, высоты, аспекта или ориентации прямолинейны. Различные плотности пикселей могут быть обработаны с помощью device-pixel-ratio (спасибо Марку Эдвардсу за предоставленный пример:https://gist.github.com/marcedwards/3446599).

  @media screen and (-webkit-min-device-pixel-ratio: 1.5),
         screen and (-o-min-device-pixel-ratio: 15/10)
  {
    body { background-image: ... } /* provide high-res image */
  }
  

  функцию resolution чище, чем device-pixel-ratio, но ему не хватает поддержки мобильного браузера.

• Javascript: адаптация размеров кнопок, изображений и т. д. на основе window.devicePixelRatio и window.screen.width и window.screen.height. Компоновка на Javascript считается плохой практикой. Также мерцание может возникнуть во время загрузки, так как выполнение начинается после pageload событие.

• -webkit-image-set изображения src-set сделайте его легким обеспечить изображения высоко-разрешения для дисплеев сетчатки, см. http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff. поддержка браузера ограничена.

   background-image: -webkit-image-set(
     url(icon1x.jpg) 1x,
     url(icon2x.jpg) 2x
   );
  

похоже, что удаление target-densitydpi в целом приносит лучшие результаты.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

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

target-densitydpi=средний-dpi работал на нас.

сценарий Столкнулся с этой проблемой при обновлении ee с PhoneGap 2.2 до 3.3.

обновленный ответ: на Android

проблема в том, что на Android-устройствах есть это Accessibilly настройки, вы можете попробовать изменить размер шрифта (поиск размер шрифта на Андроид параметр) и снова запустите приложение.

таким образом, ваши шрифты в приложении будут изменены в качестве настройки

---

Итак, вот решение для Кордова

использование :мобильные-доступность отключение PreferredTextZoom

установить мобильные-доступность на ваш проект Cordova

$ cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git

и JS в часть что-то вроде :

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   if (window.MobileAccessibility) {
      window.MobileAccessibility.usePreferredTextZoom(false);
   }
}

для Windows Phone (WP8) я нашел следующее решение: https://github.com/phonegap/phonegap-app-developer/issues/92

1. добавить в css: @ - ms-viewport{ width: device-width;}
2. добавить в html: <meta name="viewport" content="width=device-width, initial-scale=1" />

3. добавить в патч IE 10:

   (функция() { если ("- ms-user-select " в документе.функцию documentelement.стиль и навигатор.userAgent.матч(/IEMobile/10.0/)) { var msViewportStyle = документ.метод createElement("стиль"); msViewportStyle.appendChild( документ.createTextNode ("@- ms-viewport{width: auto!важный}") ); документ.getElementsByTagName ("голова") [0].appendChild(msViewportStyle); } }) ();

добавление этого решения здесь

для меня некоторые тексты были очень большими, другие были правильного размера. Проблема была с использованием значений rem для размера шрифта в css. По какой-то причине элементы, где размер шрифта был базовым значением (определенным в теле), были визуализированы намного больше, чем должны.

исправление состояло в переназначении глобального значения для размера шрифта rem в элементе оболочки для всего сайта.

(мой .размер шрифта(1.4) только рендеринг mixin: размер шрифта: 1.4 rem;)

это

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

можно исправить с помощью этого

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

.wrapper {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}