dirigiéndose a iphone4 con diseño receptivo (consultas de medios css) como si res baja

Question

Esto debe haber sido respondido antes, pero no puedo encontrar una pregunta relacionada.

He diseñado un sitio receptivo, con las consultas de medios css bajando hasta mostrar correctamente en 320 de ancho.

Quiero que desee el iPhone4 (640 x 960) cuando está en modo retrato (640 de ancho) para cumplir con las consultas de medios como si fuera ancho de pantalla = 320 píxeles en su lugar. Justificación: a pesar de que el iPhone tiene más píxeles, quiero mostrar un diseño simplificado para esos usuarios, similar a los usuarios de teléfonos de alta densidad.

¿Alguna manera de hacerlo, especificando metaetiquetas para estos teléfonos de alta densidad de píxeles, por ejemplo?

Por supuesto, podría definir consultas de medios separadas para iphone 4 y similares con min-device-pixel-ratio: 2 pero esto lleva a consultas de medios css separadas (una para baja y otra para alta densidad de píxeles) que esencialmente tienen la misma lógica, que doesn Parece muy seco para mí (http://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

Lo extraño es que el nuevo Ipad 3, con densidad de píxeles 2, se renderiza correctamente como yo quiero, es decir, imita (al menos como consultas de medios css) un dispositivo con la mitad de la resolución.

Answer 1

El iPhone 4 (y 4S) responderán a esta etiqueta meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Es la parte "escala inicial" que se está buscando. Hará que el dispositivo de alta resolución actúe como si tuviera 320 px de ancho (o 480 en el paisaje).

Hay other bugs around landscape orientation que debe tener en cuenta.

Además, tenga en cuenta que hay un orientation parameter available a preguntas de los medios:

@media screen and (orientation:landscape) { 
/* Landscape styles */ 
} 

Answer 2

Primero: Creo que hay un error tipográfico en su pregunta - en una pantalla de 640x960, 640 de ancho es el modo portait, no en horizontal . El retrato es vertical, el paisaje es horizontal.

Dicho esto, si estoy leyendo su pregunta correctamente, usted está preguntando cómo apuntar a una pantalla retina iphone usando consultas de medios para el ancho.

La respuesta es que no se puede: tanto la pantalla retina iphone como la pantalla no retina se informan al navegador como 320x240. La diferencia, como usted señaló, es que la pantalla de la retina tiene 2x densidad de píxeles, que puede orientar a preguntas de los medios:

.avatar { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: url("50x50-avatar.png"); 
} 
@media only screen and (-moz-min-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) { 
    .avatar { 
    background: url("100x100-avatar.png"); 
    background-size: 50px 50px; 
    } 
} 

Este ejemplo es para mostrar imágenes de alta resolución en las pantallas de retina, pero se puede utilizar la mismas técnicas para ajustar el diseño de las pantallas de retina.

Así, en pocas palabras, escribir sus estilos para las pantallas que no sean la retina en primer lugar, y luego agregar las anulaciones pantalla de la retina utilizando preguntas de los medios, que deben evitar sus preocupaciones DRY.

Más información:

• Retina iPad Specific CSS
• Safari Developer Library: Configuring the Viewport