Obtenga el tamaño de fuente del iPhone para que sea el mismo que el de otros navegadores

Question

Hace mucho tiempo atrás, leí a great article que describe una manera fácil de navegar entre navegadores para clasificar texto mediante CSS. La estrategia descrita es como tal:

body { 
    font-size:100%; 
    line-height:1.125em; /* 16×1.125=18 */ 
} 
.bodytext p { 
    font-size:0.875em; /* 16x.875=14 */ 
} 
.sidenote { 
    font-size:0.75em; /* 16x0.75=12 */ 
} 

Esta estrategia funciona muy bien en todos los navegadores excepto Safari en el iPhone, que siempre parece ampliar algunas partes del texto. ¿Hay alguna estrategia para evitar que esto suceda?

Normalmente mi solución sería agregar -webkit-text-size-adjust: none; para evitar que el iPhone amplíe el tamaño del texto, pero recientemente me encontré con this article, que describe que no permite a los usuarios acercar el texto en CUALQUIER navegador Safari - claramente un problema. Sé que hay una solución exclusiva de CSS, pero no puedo encontrarla. Solo quiero saber cómo debo configurar el tamaño de letra para que se muestre igual en todos los navegadores, incluido el iPhone.

Actualización: para mostrar un ejemplo, si mira this en un iPhone, observará que el texto en el párrafo es significativamente más grande que el resto del texto del sitio. ¿Por qué se destaca este texto, y hay alguna manera de que pueda decir con solo mirar el código que eso sucederá?

Answer 1

Tiene una técnica que estés satisfecho con, pero con un inconveniente:

Esta estrategia funciona muy bien en todos los navegadores excepto Safari en el iPhone, que siempre parece para agrandar ciertas fragmentos de texto . ¿Hay alguna estrategia para que evite que esto suceda?

..

Normalmente mi solución sería añadir -webkit-text-size-adjust: none; para evitar que el iPhone de aumentar el tamaño del texto , pero recientemente llegó través this article, que describe que no permite a los usuarios ampliar sobre el texto en cualquier navegador Safari - claramente un problema. Sé que hay es una solución solo CSS por ahí, pero No puedo encontrarlo.

En cuanto a style.css de http://html5boilerplate.com/mobile/

/* Prevent mobile zooming while remain desktop zooming. 
    github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 
*/ 
body { 
    -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: none; 
} 

que suena como exactamente lo que está buscando, sobre todo cuando se lee the comment in the link:

Sólo una sugerencia, que parece una buena idea de establecer -webkit-text-size-adjust en 100% en lugar de none. Establecerlo en none impide que se amplíe la fuente en el escritorio WebKit navegadores, lo que parece un problema de accesibilidad . valor por defecto de Safari móvil ha terminado 100%, que es la razón por texto es más grande - por lo que si se establece a 100% en lugar de ninguno, fuentes permanecer el tamaño correcto en el móvil, pero puede ser ampliada todavía en el escritorio.

Answer 2

Desde mi experiencia, utilizan píxeles y no los puntos, puntos de Mac y PC de visualización diferente, mientras que los píxeles son más o menos la misma (para ser honesto siempre hay una diferencia, pero con píxeles que es menos perceptible) .

Además, el line-height, por desgracia siempre hay una diferencia, (incluso entre Safari y Firefox en Mac), pero siempre se puede utilizar estilos condicionales para Internet Explorer, y si es necesario, el uso de JavaScript soluciones para Firefox de line-height.

Finalmente, algunas fuentes pueden mostrarse de forma diferente entre navegadores, es una cuestión de prueba.