如何强制调整方向更改？

Question

我目前正在为客户构建响应式布局。有时，当我在设备上进行测试并测试方向更改时，设计会中断，或者不考虑新的设备宽度。

从任一方向开始时，布局都很有效。只是在方向更改期间，它似乎卡在另一个宽度上，或者再次，不考虑新的宽度。

元视口标记中是否需要强制在方向更改后重新检查媒体查询？

需要javascript吗？我更喜欢JS免费方式来做这件事。

使用我的媒体查询进行更新：

body{
}


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

}

@media only screen and (min-width: 600px){

}

@media only screen and (min-width: 830px){

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { 

 }

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


}



@media only screen and (min-width: 1080px) {


}

@media only screen and (min-width: 1250px) {

}

Answer 1

尝试使用max-width和min-width代替max-device-width和min-device-width

max-width是视口/窗口大小的宽度

max-device-width是设备屏幕的宽度

例如，Apple产品“max-device-width在方向更改之间保持不变 - max-device-width在设备之间的行为不一致。 。