iPhone 4 ловушки макс-ширина: 480px медиа-запросов

Question

An iPhone 4 с разрешением 640 × 960 попадает в медиа-запросов, заданных в:

@media only screen and (max-width:480px) 

Этот медиа-запрос находится в очень конце из мой CSS стилей ...

Над этот запрос являются теми, кто работает отлично подходит для IPad (1024) и на рабочем столе, и т.д ...

Что же я отсутствует??

Я хотел бы iPhone4 отвечать на запросы средств массовой информации, указанных выше в таблице стилей, целенаправленные как: (макс-ширина: 640px) вместо этого, конечно ...

Для записи, мой видовых экранов тег в настоящий момент:

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

Answer 1

Вы путаете css px и отображаете px. Это понятно, потому что они оба измеряются в px. Вздох.

С точки зрения css дисплей сетчатки имеет ширину всего 320 пикселей. Тем не менее, это соотношение пикселей равно 2, каждый 1px в css-land действительно 2px на дисплее.

Taken from here вы можете использовать другой селектор для идентификации сетчатки дисплеев:

@media 
    (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */ 
}