2012-08-03 10 views
16

Tengo un problema al tratar de evitar que el iPhone cambie el tamaño de los correos electrónicos HTML para que se ajusten a la pantalla. Parece que el código a continuación cuando se coloca en la sección no tiene ningún efecto.Problema al detener el cambio de tamaño del iPhone Correo electrónico en HTML

Mi objetivo es simplemente detener el cambio de tamaño de la fuente. Probé otras variaciones usando -webkit-text-size-adjust: none; en línea y de otra manera, todo sin éxito.

Agradecería cualquier consejo o una solución alternativa.

pantalla @media y (max-dispositivo-width: 480px) {

/*fixes too big font in mobile Safari*/ 
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { 
-webkit-text-size-adjust:none; } }  </style> 
+0

Estás hablando de redimensionamiento del diseño e intentas evitar el cambio de tamaño de la fuente. ¿Estás seguro de que el problema no está en las tablas u otra cosa que tienes en tu HTML? – LeBen

+0

Lo siento, debería haber sido más claro, todo lo que quiero hacer es detener el tamaño de la fuente. No importa cómo o dónde use -webkit-text-size-adjust: none; no parece funcionar Lo he probado en Litmus extensivamente. – jsuissa

+0

Las hojas de estilo (en línea o no) a menudo se ignoran en el correo electrónico (o se eliminan por completo). Intente configurarlo en un atributo 'estilo' en su lugar, tal vez? – 0b10011

Respuesta

-1

Un iPhone retina tiene una anchura de 640, su consulta de medios se detiene en 480px.

De todos modos, puede deshacerse de la consulta de medios por completo. El único cliente de correo basado en webkit que utilizará esta propiedad (-webkit-text-size-adjust:none) es la aplicación de correo de iPhone y iPad.

También la aplicación de correo también puede ser el único cliente de soporte CSS3

+0

Las pantallas Retina tienen los mismos tamaños de pantalla, solo cambia el DPI. Responde a las mismas consultas de medios que los viejos iPhones. – LeBen

12

El iPhone parece ser un dolor cuando se trata de cosas de cambio de tamaño, especialmente cuando se cambia la orientación del teléfono. ¿Has intentado agregar la metaetiqueta con la configuración de la ventana gráfica?

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

No les impide el zoom, pero no he encontrado ninguna manera mejor para detener el iPhone a partir zoom sobre el cambio de orientación. No estoy seguro si esto ayudará en esta situación, pero solo una sugerencia para probar.

+0

Buena sugerencia. Había intentado algo similar y esto, y no parece hacer mella. Todo el correo electrónico se vuelve a clasificar según el tamaño automáticamente para caber la pantalla que hace el tipo demasiado pequeño. – jsuissa

+0

Solo una nota, la inclusión de esta metaetiqueta hará que Blackberrys muestre una pantalla en blanco en lugar de cualquier correo electrónico. – samanthasquared

2

Lo que está haciendo es correcto, pero el problema es que en lugar de utilizar -webkit-text-size-adjust:none; dentro de una etiqueta de estilo, que se debe utilizar en la forma que a continuación:

<body style="-webkit-text-size-adjust:none;"> 

Esto significa que debe utilizar esto como una CSS en línea propiedad.

+0

Así que traté de agregarlo en línea, y también eliminé las consultas de medios. Las pruebas de tornasol todavía muestran que todo el correo electrónico se volvió a clasificar según el tamaño para ajustarse y el texto se redujo, por lo que aún se está ajustando el tamaño de la fuente. – jsuissa

1

para deshacerse de ese problema que tiene que poner lo siguiente en el cuerpo de la etiqueta CSS:

-webkit-text-size-adjust: 100%; 

De esta manera Safari mantiene el texto al 100% del tamaño deseado. En caso de que establezca el valor en ninguno, los usuarios no podrán aumentar la fuente y este es un comportamiento no deseado.

Esta propiedad CSS es compatible y debería funcionar.

Comprobar el Safari oficial apoyó la referencia CSS:

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

Además tenga en cuenta que la pantalla de tipo de soporte es compatible con:

  • Safari 4.0 y posterior.
  • iOS 1.0 y posterior.

Espero que esto ayude.

BR,
Tolis

3

me ha pegado w/este problema y no hay ninguna solución disponible en la red que funciona. No hasta que me di cuenta de lo que está causando esto.

CAUSA: Este problema se produce si tiene una imagen w/en el correo electrónico. Cuando la imagen se escale automáticamente, todo el correo electrónico/página se ajustará automáticamente en la ventana.

SOLUCIÓN: Añadir estilo en línea para la imagen de -min ancho de (300px por lo que no se necesita todo el ancho de 320 píxeles iPhone), ancho máximo (su máximo deseado con), y ancho de 100%.

es decir, imagen src = "image.jpg" style = "width: 100%; min-width: 300px; max-width: 500px;"

Funcionó para mí, ... ¡esperando que esto también te ayude! ;-)

Cuestiones relacionadas