de Apple Macbook Pro tiene una pantalla de 15" con una resolución de 2880x1800. En la actualidad se está escalando sitios web que resulta en imágenes de píxeles-duplicado y una disposición que aparece doble escalado también.sitio de Conversión para pantallas Retina resolución nuevas
Como un desarrollador web cómo hago para convertir mi página web Valid CSS existente PHP// para aprovechar las pantallas de alta DPI
La siguiente página ofrece una decente de las mismas:?
http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/
fuentes Iconos proveen una solución, y los tipos @media permiten estilos adicionales a utilizar:
Ejemplo:
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.logo {
background: url(/path/to/my/highreslogo.png) no-repeat;
background-size: 100px 100px;
/* rest of your styles... */
}
}
Acabo de hacer un sitio amigable con la retina, utilicé la consulta de medios anterior (similar) y funcionó como un sueño. – DBUK
Tal vez la solución para una retina iPhone/iPad trabajaría en una retina Mac. Indicar una imagen de mayor resolución, tales como:
background-image: url([email protected]);
Stackexchange no es un sitio diseñado para adivinar las respuestas –
@ChrisBeach Usted pregunta una questio n, y luego derribar una posible solución porque porque digo "quizás"? – Connor
@NoahWitherspoon ¿Por qué no funcionaría? La respuesta de DBUK es esencialmente sugerir la misma solución, pero mi respuesta es -2 ... – Connor
Este script podría ayudar - http://retinajs.com/. Agregas @ 2x a los cortes de tu nombre de imagen para la visualización de retina y el script hace el resto. Una de las dificultades al cortar las imágenes es que todo debe ser divisible por dos, lo cual ya sabes, pero esto me hizo tropezar cuando hice mis botones perfectamente pero ignoré la sombra/línea de 1px que los rodeaba, ¡do! :(
Editar: Sólo se encontró con un buen artículo/tutorial sobre el tema:.
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
Usted podría terminar haciendo cosas tan pequeñas que las personas sin visión perfecta pueden tener dificultades –
Mi objetivo ISN Para hacer las cosas más pequeñas, quiero duplicar su resolución mientras conserva el tamaño físico. Como Apple lo ha hecho en su sitio web cuando se ve en la resolución Retina. –