javascript - tutorial - curso phonegap

Phonegap El texto y el diseño de la aplicación son demasiado pequeños

Question

Recientemente construí una aplicación para Android usando html, css, javascript y ejecutándolas a través de phonegap para crear la aplicación real. Uno de los problemas que encontré en un teléfono es que el texto parece demasiado pequeño. También algunas imágenes son un poco pequeñas también. Agregué una metaetiqueta de ventana gráfica pero tampoco parece funcionar. Aquí están las meta etiquetas:

    <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" />`

Así es como se ve

Así es como debe verse:

Answer 1

Añadiendo esta solución aquí

Para mí, algunos textos se veían muy grandes, otros tenían el tamaño correcto. El problema fue con el uso de valores rem para el tamaño de letra en el CSS. Por alguna razón, los elementos donde el tamaño de la fuente era el valor base (definido en el cuerpo) se volvían mucho más grandes de lo que deberían.

La solución fue reasignar un valor global para el tamaño de fuente rem en un elemento contenedor para todo el sitio.

(mi .font-size (1.4) es solo un rendering de mixin: font-size: 1.4rem;)

Así que esto

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

Se puede arreglar con esto

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

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

h1 {
  .font-size(2.6);
}

Answer 2

Para Windows Phone (WP8) encontré la siguiente solución: https://github.com/phonegap/phonegap-app-developer/issues/92

1. agregar a css: @ -ms-viewport {width: device-width; }
2. agregar a html: <meta name="viewport" content="width=device-width, initial-scale=1" />

3. agregar a parche IE 10:

   (función () {if ("-ms-user-select" en document.documentElement.style && navigator.userAgent.match (/IEMobile/10.0/)) {var msViewportStyle = document.createElement ("style"); msViewportStyle. appendChild (document.createTextNode ("@ - ms-viewport {width: auto! important}")); document.getElementsByTagName ("head") [0] .appendChild (msViewportStyle);}}) ();

Answer 3

Parece que eliminar el target-densitydpi brinda los mejores resultados.

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

Esto debería ser más que suficiente para controlar la apariencia de su aplicación en la mayoría de los casos.

Answer 4

Tuve el mismo problema y lo resolví cambiando la ventana gráfica. También pensé que el problema era phonegap, pero en realidad era que los dispositivos utilizados para las pruebas tenían diferentes dpi.

Mi solución fue cambiar target-densitydpi en la ventana gráfica para:

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

Espero eso ayude

Answer 5

Tuve un problema similar e hice una investigación que pensé que valía la pena compartir:

• Establezca target-densitydpi la ventana target-densitydpi en medium-dpi (= 160dpi), como ya se sugirió. Esto virtualiza la unidad px , por ejemplo, 1px en html / css luego corresponde a 2 píxeles físicos en un dispositivo de 320dpi. Tenga en cuenta que las imágenes también tienen escalas (y están borrosas).

  <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: utilice las consultas de los medios para implementar el estilo condicional. La adaptación para diferentes tamaños de pantalla depende del ancho, alto, aspecto u orientación es sencillo. Se pueden manejar diferentes densidades de píxeles con la proporción device-pixel-ratio (gracias a Marc Edwards por proporcionar un ejemplo: 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 */
  }

  La resolution función multimedia es más limpia que la relación device-pixel-ratio , pero carece de compatibilidad con el navegador móvil.

• Javascript: adapte tamaños de botones, imágenes, etc. en función de window.devicePixelRatio y window.screen.width y window.screen.height . Layouting por Javascript se considera una mala práctica. También se puede producir un parpadeo durante la carga, ya que la ejecución comienza después del evento de pageload .

• -webkit-image-set y src-set imagen facilitan el suministro de imágenes de alta resolución para pantallas retina, consulte http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff . El soporte del navegador es limitado.

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

Answer 6

target-densitydpi = medium-dpi Funcionó para nosotros.

Escenario Se enfrentó a este problema cuando se actualizó desde PhoneGap 2.2 a 3.3.

Answer 7

Respuesta actualizada: para Android

El problema está en que los dispositivos Android tienen esta configuración de Accesibilly . Puedes intentar cambiar el tamaño de la fuente (buscar el tamaño de fuente en la configuración de Android ) y ejecutar tu aplicación nuevamente.

Por lo tanto, sus fuentes en la aplicación se cambiarán según su configuración

Entonces aquí hay una solución para Córdoba

Uso: mobile-accessibility para deshabilitar PreferredTextZoom

Instale accesibilidad móvil en su proyecto Cordova

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

Y JS parte es algo así como:

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