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


недавно я создал приложение для android с использованием html, css, javascript и запустил их через phonegap для создания фактического приложения. Одна из проблем, с которой я столкнулся в одном телефоне, заключается в том, что текст выглядит слишком маленьким. Также некоторые изображения немного маленькие. Я добавил метатег viewport, но он, похоже, тоже не работает. Вот мета-теги:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />`

вот как это выглядит

вот как это должно выглядеть:

7 51

7 ответов:

У меня была такая же проблема, и я решил ее, изменив видовое окно. Я также думал, что проблема была phonegap, но на самом деле это было то, что устройства, используемые для тестирования, имели разные dpi.

мое решение состояло в том, чтобы изменить target-densitydpi на видовом экране на:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

надеюсь, что это помогает

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

  • настройки просмотра 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 настройки, вы можете попробовать изменить размер шрифта (поиск размер шрифта на Андроид параметр) и снова запустите приложение.

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

Accessibilly font size


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

использование :мобильные-доступность отключение 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);
}