css - letra - font-size
Densidad de píxeles, visualización de retina y tamaño de fuente en CSS (2)
Bien, este es un malentendido bastante serio (lo cual es genial! :)), así que aquí hay una breve explicación de lo que podrías querer hacer.
En primer lugar, cualquier iPhone / iPod / iPad reciente o muchos teléfonos Android tienen pantallas Hi DPI, por lo que es posible que ya tenga algo con qué probar. Si no, y lo está haciendo profesionalmente, solo compre un iPod Touch 4G.
En términos de cómo funciona, para el 99% de las cosas, no necesitas hacer nada. Si funcionara como sugirió, entonces la mayoría de los sitios web serían una cuarta parte del tamaño que deberían tener, e Internet se rompería.
Para las fuentes, SVG, sombras de cuadro de CSS, gradientes y cualquier otro material CSS extraído, todo está bien. Esas cosas se ven impresionantes sin ningún trabajo extra. (Por eso hemos estado presionando hacia todo en CSS por un tiempo).
Para los mapas de bits (es decir, pngs, jpgs, gifs), todo lo que necesita hacer es proporcionar la imagen con 2 veces la resolución, pero su tamaño es el mismo de lo normal.
Como ejemplo, si su página tuviera una imagen de 100px por 100px, proporcionaría una imagen de 200px por 200px, pero especifique en CSS o como atributo en HTML que es de 100px por 100px.
La razón por la que esto funciona es que un píxel en la pantalla no es lo mismo que un píxel CSS. Esto es algo bueno, porque de lo contrario, como digo, las cosas serían pequeñas.
Supongo que en retrospectiva, podría haber sido mejor llamar a la unidad px en CSS algo diferente, como un dot o algo, pero ya está.
A veces verá referencias a píxeles independientes del dispositivo, que es la diferencia entre el px CSS y el píxel real en la pantalla.
No tengo una Retina MacBook para probar estas cosas, y parece que hay mucha confusión en Internet sobre el diseño web en pantallas de alta densidad de píxeles.
Ahora, ¿asumo que WebKit en una MacBook con pantalla Retina escala la página aproximadamente el doble de su tamaño, ya que la mayoría de las páginas web no están diseñadas para adaptarse a la mayor densidad de píxeles?
En mi opinión, el caso ideal al diseñar para estos, o en realidad cualquier tipo de pantalla es utilizar ems en lugar de píxeles como podría hacerlo;
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body { font-size: 150%; }
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
body { font-size: 200%; }
}
y la página entera se escalaría en consecuencia. ¿O sería? ¿El tamaño de fuente predeterminado en los navegadores que se ejecutan en MacBook de Retina sigue siendo 16px o es más alto? Porque si es más alto, el efecto de escalado se multiplicaría.
Supongo que mi pregunta es; ¿Si uso ems de forma coherente, lo único que debería hacer es cambiar el tamaño de fuente para cada proporción de píxeles de dispositivo?
La pantalla Retina no duplica el tamaño del elemento. Sólo efectúa imágenes en la web.
Para cada "píxel web" de una imagen, se requieren 4 ( creo ) "píxeles de pantalla", por lo que las imágenes se estiran para llenar estos espacios de píxeles adicionales, lo que hace que se vean menos nítidos en una pantalla de retina. Las imágenes se deben exportar a un DPI mayor y se deben mostrar en las pantallas Retina mediante consultas de medios o Javascript.
Texto, efectos CSS, lienzo, vectores SVG, etc. no se ven afectados directamente por la pantalla retina.