Медиа-запрос не обновляется при ротации для iphone 4 и iphone 5s

Question

CSSs в запросе Media не обновляется, когда я поворачиваю iPhone 4 и iPhone 5 между портретом и пейзажем.

Поскольку я использую меру видового экрана, vw и vh, в запросе css для СМИ, я ожидаю, что они будут повторно применены во время поворота между портретом и ландшафтом - они работают полностью отлично во всех телефонах, кроме iPhone 4 и iPhone 5s. Когда я поворачиваюсь от портрета к пейзажу, ширина в портрете также остается в пейзаже.

Я не понимаю, почему только iPhone 4 и iPhone 5 имеют эту проблему. Должны ли быть какие-то проблемы в моем CSS?

[редактировать] Кусочки коды ниже:

@media only screen 
 
and (min-device-width : 320px) and (max-device-width : 640px) 
 
{ 
 
... 
 
.products .product .info 
 
{ 
 
    width: 80vw; 
 
    margin: 0 0 0 0; 
 
} 
 
... 
 
}

80vw сохраняет ту же ширину, когда я поворачиваю с портретной на ландшафтную в iPhone 4. Если я обновите страницу в ландшафте физическая ширина 80vw не изменяется. Могу ли я получить за это помощь?

Answer 1

Вот некоторые хорошие примеры из CSS-Tricks

/* iPhone 4 (landscape) ----------- */ 
 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
 
/* Styles */ 
 
} 
 

 
/* iPhone 4 (portrait) ----------- */ 
 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
 
/* Styles */ 
 
} 
 

 
/* iPhone 5 (landscape) ----------- */ 
 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
 
/* Styles */ 
 
} 
 

 
/* iPhone 5 (portrait) ----------- */ 
 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
 
/* Styles */ 
 
} 
 

 
/* iPhone 6 (landscape) ----------- */ 
 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
 
/* Styles */ 
 
} 
 

 
/* iPhone 6 (portrait) ----------- */ 
 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
 
/* Styles */ 
 
} 
 

 
/* iPhone 6+ (landscape) ----------- */ 
 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
 
/* Styles */ 
 
} 
 

 
/* iPhone 6+ (portrait) ----------- */ 
 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
 
/* Styles */ 
 
}