iphone 4 和 iphone 5s 的媒体查询在轮换时不会更新

Question

当我在纵向和横向之间旋转 iPhone 4 和 iPhone 5s 时，媒体查询中的 CSS 不会更新。

由于我在媒体查询 css 中使用视口度量 vw 和 vh，我希望它们在纵向和横向之间旋转时重新应用 - 它们在除 iPhone 4 和 iPhone 5s 之外的所有手机中都可以正常工作。当我从纵向旋转到横向时，纵向的宽度也保持在横向。

我不明白为什么只有 iPhone 4 和 iPhone 5s 有这个问题。我的 css 一定有问题吗？

[编辑]代码片段如下：

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

当我在 iPhone 4 中从纵向旋转到横向时，80vw 保持相同的宽度。如果我以横向刷新页面，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 */
}