Estou tentando implementar layouts alternativos para o iPad / iPhone e iPhones antigos também.

Eu estabeleci que o melhor método é usar@media da especificação CSS3.

Como tal, estas são as minhas consultas de mídia a cada minuto:

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

Acima é para pequenas telas de desktop e laptop.

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

Acima é para o iPad e MUITO pequenas telas de desktop / laptop.

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

Acima é para iPhone 3GS e dispositivos móveis em geral.

No entanto, o novo iPhone 4 com a tela de "retina" dançante de Steve Jobs significa que ele tem uma proporção de pixels de 2-1, o que significa que 1 pixel realmente aparece no navegador como 2x2 pixels, fazendo sua resolução (960x640 - o que significa que acionar o layout do iPad em vez do layout do dispositivo móvel), portanto, isso exige OUTRA consulta de mídia (até agora suportada pelo webkit):

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

Agora, o problema é que ... quero meu novo e brilhante layout do iPhone 4 amalgamado com o iPhone 3GS e o layout do dispositivo móvel, pois ambos terão exatamente o mesmo código CSS interno,

Portanto, fazendo minha pergunta;

Como crio um@media regra que aponta o iPhone 4, 3GS e outros celulares para os mesmos estilos?