html - 媒体查询最大宽度 992px 不适用于 ipad 横向 View

Question

当我在 iPad 上查看横向 View 时，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 像素 x 1024 像素(纵向)
• 1024 像素 x 768 像素(横向)

如果你想定位 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 */}