Estou criando um site responsivo com aparência diferente em dispositivos móveis. Eu tenho três consultas de mídia separadas no meu css, além de uma consulta para exibição (ões) de retin

/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}

/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}

/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}

/**  RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}

Quando o iPad está no modo retrato, ele obtém a versão móvel, mas quando está no modo paisagem, obtém a versão regular do sit

Meu problema é este: agora, com o "novo iPad" e a tela da retina, certas imagens da retina não estão alinhadas corretamente para a versão do iPad com retina em paisagem. O css da retina global está anulando o css regular e acho que ach

or exemplo, na versão móvel, tenho uma imagem de plano de fundo centralizada na tela, mas no site comum ela fica alinhad

Alguém conhece uma maneira de segmentar apenas imagens de retina para iPad apenas em CS

Obrigad

Edit: É com isso que eu estava brincando, mas não parece funcionar:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}