Cómo establecer el tamaño de fuente igual en las celdas de la tabla para las páginas html del dispositivo móvil

Tengo un problema con la representación de fuentes en dispositivos móviles. Tengo un ancho de tabla simple fijado fijo a 800 pixeles, tamaño común para los móviles de hoy.

Texto en mis células todos utilizan el mismo maquillaje html css. El texto de la primera fila muestra ok

Pero la siguiente fila es un problema que se divide en dos celdas. La celda izquierda es una imagen y en la celda derecha hay algún texto. Mi problema es que la mayoría de los navegadores móviles reducen el tamaño de la fuente en esa celda.

Para mí sería oké si ese texto simplemente se extendería por un poco más de líneas, pero eso no sucede, tienden a mantener tantas líneas similares como en una vista de escritorio del navegador.

He establecido el tamaño de la fuente utilizando pt px y sin efecto en el archivo css como

.DefaultFont { font-family: 'Merriweather Sans', Arial,verdena,sans-serif; font-size: 13pt; font-style: normal; color:#4e0203; font-weight: 400; } 

Utilizado 13pt 13em y otros métodos etc nada funcionó.

Y para el elemento html utilizado span y div y p y probado dentro del elemento td, pero de nuevo sin efecto.

PS No estoy buscando trucos javascript para escalar las páginas del lado del cliente con la detección de dispositivos, etc Como simplemente uso php para determinar si es un escritorio o un dispositivo móvil (que requiere menos código para ser transmitido). Sólo necesito el código para que la fuente no cambie como causado por un navegador web móvil.

¿Cómo puedo parar a esos clientes de reescalar partes de tablas?


SOLUCIÓN La solución final que funcionó muy bien fue una combinación de varias personas aquí.

  • Establecer ancho de tabla en%
  • Establecer tamaño de fuente en vw (que como% tiene también un índice 100), un valor bajo como 2 o así.
  • Nota vw es soportado por mucho más que sólo el tamaño de fuente, también imágenes.
  • Incluir la etiqueta meta incluso funcionó sin que después de arriba, pero para estar en el lado seguro que lo recomiendo.

Tal vez debería utilizar unidades de tipografía de tamaño de vista para el font-size .

Se puede usar cuando quiera cambiar el tamaño a través del ancho o la altura de la ventana de visualización (contenedor de elementos). O ambos, para el caso. Los posibles valores son:

Vh – altura de la viewport
Su tamaño es proporcional a la altura del envase.

 font-size: 2vh; 

Vw – ancho de la ventana de visualización
Su tamaño es proporcional al ancho del contenedor.

 font-size: 2vw; 

Vmin – mínimo de viewport
Tamaños proporcionalmente a los más pequeños entre 'vh' y 'vw'.

  font-size: 2vmin; 

Vmax – máximo del visor
Se dimensiona proporcionalmente al más grande entre 'vh' y 'vw'.

  font-size: 2vmax; 

Sin duda puede darle la apariencia que usted desea. Basta con encontrar el valor proporcional actual, y no importa el tamaño de la pantalla, que se ajuste!

W3 viewport longitud relativa docs

¿Has probado las etiquetas Meta, para comprobar si funciona …

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

Esto significa que el navegador (probablemente) hará que el ancho de la página en el ancho de su propia pantalla. Así que si esa pantalla es 320px de ancho, la ventana del navegador será de 320px de ancho, en lugar de modo zoomado y mostrando 960px (o lo que ese dispositivo hace por defecto, en lugar de una metaetiqueta responsiva).

Echa un vistazo, puede ser útil ..

Creo que esto debería hacer el truco

 -webkit-text-size-adjust: none; 

Puede utilizar window.innerHeight .

  • ¿Por qué el navegador Android no abarca este párrafo sobre el ancho completo del navegador?
  • Hacer referencia a la imagen en los elementos de HTML no funciona
  • Cómo inyectar un script javascript en una vista web antes de la carga html en android 7
  • El enfoque no funciona en android
  • Vinculación del elemento de una página web a una aplicación para Android
  • ¿Es útil utilizar el diseño completo de WebView en la aplicación nativa de Android?
  • Eliminar el relleno de Android predeterminado de correos electrónicos HTML
  • Mostrar en html de vista de texto con estilos en línea
  • Android java obtener html etiqueta de imagen de cadena
  • Convertir Html y establecer texto en Textview
  • Cómo mostrar la fuente hindi en la vista web de Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.