当我将屏幕旋转到横向时，移动css不起作用

Question

这里为移动设备完成 style.css 的代码，代码适用于移动肖像尺寸，当我旋转到横向时，调用默认css 如何解决此问题问题

  @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    }

另一个术语是  @media (min-width: 481px) {} 这适用于所有尺寸，如平板电脑，电脑..

为此我在google crome中检查了web开发人员工具

Answer 1

问题是当你旋转设备时，屏幕大于480像素

@media screen and (orientation:portrait) {
    ...Some Css Code
}
@media screen and (orientation:landscape) {
     ...Some Css Code
}

这会对你有所帮助

或

你可以找到景观分辨率，而不是用它来定位媒体查询。

对于 Iphone 5 ，您的媒体查询必须与此类似

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}