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分辨率为：

768像素×1024像素（人像）
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的分辨率为768像素×1024像素，这意味着在横向模式下，它的宽度为1024像素。由于992px适合1024px宽屏幕，因此媒体查询无效。

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

媒体查询max-width 992px无法在ipad横向视图上工作

2 个答案: