Исправьте мультимедийный запрос CSS для обслуживания различных изображений iPhone <= 3 и iPhone 4+ (без потери пропускной способности)

Question

После прочтения этой превосходной статьи о медиазапросах (http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). я хочу убедиться, что мои медиазапросы для веб-приложения (только для iphone) верны, и на iPhone пользователей не загружаются ненужные фоновые изображения, предназначенные для другого iPhone устройство.

это правильно?

/* IPHONE 3 IMAGES
================================*/
@media all and (-webkit-min-device-pixel-ratio: 2){
    /* my small background imgs here.... */    
}

/* IPHONE 4 'retina' IMAGES
================================*/
@media all and (max-device-width: 480px){
    /* my high-res background imgs here.... */    
}

Answer 1

Вы можете использовать @media not all и (-webkit-min-device-pixel-ratio: 2) для таргетинга до iphone 4, но это будет работать, только если браузер знает о min-devive-pixel-ratio.Поэтому старые версии iPhone и другие браузеры не будут загружать ни один из правил.Единственный способ сделать это - либо на стороне сервера (не уверен, возможно ли провести различие между iphone 4 и iOS 4), либо использовать JS для обнаружения и загрузки любого из 2 правил.

Оба не идеальны, поэтому я лично выбрал бы просто принять дополнительную загрузку.Может быть, даже отправка большого изображения обоим, потому что http накладные расходы намного хуже, чем несколько дополнительных байтов тела, но это зависит от размера изображения.