android - pantalla - como reducir el tamaño de las aplicaciones en samsung

¿Por qué el texto del párrafo se reduce en Chrome para móviles?

Question

El problema está ocurriendo en Chrome / Android y posiblemente Chrome en otros dispositivos móviles. Solo he podido probarlo en un Nexus 5x hasta ahora. Estoy usando Handlebars.js para mostrar dinámicamente las comillas dentro de las etiquetas de párrafo. Siempre que la cita mostrada sea inferior a tres líneas, el tamaño de la fuente se reduce. Estoy teniendo dificultades para depurar este problema de tamaño de fuente porque solo parece estar sucediendo en Chrome para dispositivos móviles. El problema no se replica en el modo de respuesta de las herramientas de desarrollo de Chrome. El cambio de tamaño de la fuente no ocurre en IOS Safari o Firefox Mobile.

Si tiene Chrome en un dispositivo móvil, ¿podría revisar el juego y ver si nota el problema? ENLACE AQUI

Aquí hay un video que muestra el cambio de tamaño de fuente: video del problema

Aquí hay dos imágenes una al lado de la otra que ilustran el problema. La fuente en la imagen izquierda es más grande que la fuente en la imagen derecha:

Aquí está el código para esa sección del sitio ( enlace al repositorio ):

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p {
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}

<div id="game-screen">
  <div id="game-pictures">
  </div>
  <div id="game-quotes">
    <h6 class="center">Quote {{counter}}/10</h6>
    <p>"{{content}}"</p>
  </div>
</div>

¿Alguien tiene una idea de lo que podría estar causando este cambio de tamaño de fuente?

Gracias de antemano si puede ofrecer alguna ayuda.

Enlace al repositorio

Edit: ¡Gracias a todos ustedes que me ayudaron!

Answer 1

¿Puedes verificar si el tamaño de letra de tu Chrome está al 100% en la configuración de tu teléfono? Chrome para Android tiene una opción para representar la fuente en un valor diferente. Puede encontrar esta opción en: Menú -> Configuración -> Accesibilidad. Cometí un error como este hace algunas semanas y quiero estar seguro de que ese no es el caso aquí. Lo siento si estoy fuera de la línea aquí.

También descubrí que, por alguna razón desconocida, a veces Chrome para Android establece esta configuración de fuente incorrecta en el momento de la instalación. No pude replicar este comportamiento, pero tengo un teléfono, de un familiar, con esto, por lo que es posible que no esté consciente del hecho de que esta configuración no está establecida al 100%.

Answer 2

Agregué un * después del selector de párrafo para seleccionar todos los párrafos. tal vez esto resuelva tu problema Por favor, dime si funcionó, quiero saber el resultado :)

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p *{
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}

Answer 3

Esto puede ser debido a la resolución del teléfono o tableta. Puede ser mejor personalizar su página web para mantener el mismo tamaño, sin importar el dispositivo.

intenta usar max-width: Resolución ;

Tendrá que aplicar esto a la clase de cuerpo para que esto se aplique a todo.

ES DECIR

`.body {`<br>
`    max-width: 3840px;` /*4K resolution, for 4K displays*/

Esto DEBE corregir el problema de texto. De lo contrario, consulte https://www.w3schools.com o https://developer.mozilla.org/en-US/ . puede ser capaz de ayudarle.

Answer 4

He experimentado este mismo problema y es muy molesto. Presenté un error para Chrome (consulte los detalles aquí: https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9 ) y básicamente dijeron que no valían la pena para solucionarlo. . En mi caso, según lo sugerido por @Cheesy, la accesibilidad de mi androide se configuró en un tamaño más grande que el tamaño de fuente estándar. Eso no invalida el problema, OMI. Si el tamaño de fuente grande hace que TODAS las fuentes sean más grandes. Pero no debe ser inconsistente cambiar el tamaño de la fuente en algunos lugares de la página mientras se ignoran otros.

Answer 5

La unidad rem es diferente a px o em . Cuando cambia el tamaño de la ventana, el uso de rem mantendrá la proporción del texto y el tamaño de la ventana iguales. Trate de usar em o px para resolver el problema :)

Answer 6

No estoy seguro de si esta es la respuesta a tu pregunta, pero me parece coherente con CSS:

body {
    /** Setting the ''font-size'' property of the <body> to 62.5%
     *   allows you to use the ''em'' measurement as you would in ''px'' form.
     *   ...hope that''s clear.
    */
    font-size: 62.5%;
}

#someDivInBody {
    font-size: 1.65em; /* or ''16.5px'' by CSS */
}

Este método me ha permitido usar la medición em como lo haría en px pero con más consistencia y control.

Answer 7

Por compatibilidad cruzada para mis páginas web tiendo a usar lo siguiente:

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

Esto parece funcionar sin un estilo adicional con CSS necesario para las plataformas móviles. No estoy seguro si es lo que quieres sin embargo.