媒体查询最大宽度992px不适用于ipad横向视图

Question

当我在iPad上以横向视图查看时，CSS媒体查询max-width: 992px不工作，响应布局仍然可见（但在桌面上，它在992px处中断）。感谢您的帮助。

<meta name="viewport" content="width=device-width" />

我的CSS媒体查询：

.responsive_button{display:none;}
@media only screen and (max-width: 992px) {
   .responsive_button{display:block;}
}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 480px) {}
@media only screen and (max-width: 320px) {}

Answer 1

iPad分辨率为：

• 768px x 1024px（纵向）
• 1024px乘768px（横向）

如果你想针对ipad的不同方向，请使用以下媒体查询，注意方向也已指定。

人像版的iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

横向iPad：

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

Answer 2

iPad的分辨率为768px乘1024px，这意味着在横向模式下，它的宽度为1024px。媒体查询将不会处于活动状态，因为992px适合1024px宽的屏幕。

一般来说，横向模式下的iPad应该被视为桌面屏幕。