Estoy tratando de implementar diseños alternativos tanto para iPad / iPhone como para iPhones anteriores también.

He establecido que el mejor método es usar@media de la especificación CSS3.

Como tales, estas son mis consultas de medios en este momento:

@media screen and (max-width: 1000px) { ... }

Above es para pantallas pequeñas de escritorio y portátiles.

@media screen and (max-width: 700px) { ... }

Above es para iPad y pantallas de escritorio / laptop MUY pequeñas.

@media screen and (max-device-width: 480px) { ... }

Above es para iPhone 3GS y dispositivos móviles en general.

Sin embargo, el nuevo iPhone 4 con la pantalla retina que canta y baila de Steve Jobs significa que tiene una relación de píxeles de 2-1, lo que significa que 1 píxel realmente aparece en el navegador como 2x2 píxeles haciendo su resolución (960x640, lo que significa que activará el diseño del iPad en lugar del diseño del dispositivo móvil), por lo que esto requiere OTRA consulta de medios (solo hasta ahora compatible con webkit):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Ahora, la cuestión es ... Quiero que mi nuevo y brillante diseño de iPhone 4 se amalgame con el iPhone 3GS y el diseño del dispositivo móvil, ya que ambos tendrán exactamente el mismo código CSS interno,

Por lo tanto, haciendo mi pregunta;

¿Cómo creo una@media ¿Regla que apunta tanto el iPhone 4, 3GS como otros móviles a los mismos estilos?