El problema que tengo, seguro que es una tontería, pero no he encontrado nada que me lo resuelva.
Tengo un CSS, que aplica los estilos en función de la pantalla, es decir, mi página web es Responsive Web Design. Uso medias querys, que están definidas en mi CSS, y bueno, funcionan perfectamente en todos los dispositivos Android o en cualquier navegador de PC o Laptop (Portatil).
Ahora bien, en cuanto me paso a iOS, en este caso, a iPhone 5. (320 x 568). En el ancho de 320, funciona perfectamente:
Vista en simulador (320):
Vista en el dispositivo real (320):
Como observamos, es igual, no sufre cambios. Pero en cuanto giro la pantalla, no aplica el CSS correctamente al 100%, en específico, el tamaño de fuente. Es decir:
Vista en simulador (568):
Pero claro en el dispositivo real cambia, y no se el porque cambia... total el resultado en el dispositivo real es este:
Vista en dispositivo real (568):
Por qué pasa esto? el tamaño de fuente es 100%. Si alguien sabe algo de esto, genial!! me ayudaría mucho. Supongo que será algo parecido a los estilos de los botones (en iOS tiene un CSS que hay que desactivarlo para que se aplique nuestro CSS, con el atributo: -webkit-appearance: none;) de iOS, pero no he encontrado nada.
El CSS que tengo definido, tengo esto:
@media screen and (max-width: 1023px){
header{
font-size: 110%;
}
main{/* Contien la parte central de mi web. */
font-size: 100%;
}
footer{
font-size: 90%;
}
}
Y lo cambio aquí, para resolución menor.
@media screen and (max-width: 500px){
header{
font-size: 90%;
}
main{
font-size: 80%;
}
footer{
font-size: 70%;
}
}
Muchas gracias por tomaros el tiempo en leer mi pregunta.