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

Недавно я создал приложение для Android, используя html, css, javascript и запуская их через телефонную книгу, чтобы создать реальное приложение. Одна из проблем, с которыми я столкнулся на одном телефоне, заключается в том, что текст выглядит слишком маленьким. Также некоторые изображения немного малы. Я добавил метатег 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" />`

Вот как это выглядит This happens in a particular phone(Samsung Galaxy)

Вот как это должно выглядеть:
This is how it looks in htc wildfire s

Ответы

Ответ 1

У меня была такая же проблема, и я решил изменить видовое окно. Я также думал, что проблема связана с телефоном, но на самом деле устройства, используемые для тестирования, имели разные 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" />

Надеюсь, что это поможет

Ответ 2

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

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

    <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 (спасибо Marc Edwards за предоставленный пример: 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
 );

Ответ 3

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

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

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

Ответ 4

target-densitydpi = medium-dpi Работаем для нас.

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

Ответ 5

Обновленный ответ: для Android

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

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

Размер шрифта для доступa

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

Использовать: mobile-accessibility отключить PreferredTextZoom

Установите мобильную доступность на проект в Кордове

$ 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);
   }
}

Ответ 6

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

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

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

    (функция() { if ( "-ms-user-select" в документе document.documentElement.style && navigator.userAgent.match(/IEMobile/10.0/)) {   var msViewportStyle = document.createElement( "стиль" );   msViewportStyle.appendChild(       document.createTextNode( "@- мс-видовой экран {ширина: авто важно!}" )   );   document.getElementsByTagName( "голова" ) [0].appendChild(msViewportStyle); } })();

Ответ 7

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

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

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

(мой .font-size (1.4) - это только рендеринг mixin: font-size: 1.4rem;)

Итак, это

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);
}