平板横屏时布局错乱怎么解决？

Air-兴慧提问于 2026-03-11 05:08:21 阅读 9

移动

我做的移动端页面在手机上显示正常，但一到平板横屏就整个布局崩了，元素挤在一起。我试过用媒体查询针对 iPad 的尺寸写样式，但效果不稳定，有时候生效有时候又不生效，特别头疼。

目前我的 CSS 是这样写的：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 20px;
    max-width: 90%;
  }
}

是不是这个媒体查询条件没覆盖全？或者平板横屏的判断方式不对？求指点！

我来解答赞 7 收藏

反馈

1 条解答

Prog.柯依 Lv1

你的问题在于媒体查询没有区分横竖屏方向，只用宽度范围判断的话，平板竖屏时也会命中这个规则，而且有些Android平板横屏宽度会超过1024px。

加上 orientation 就能精准定位横屏了：

/* 横屏时生效 */

@media screen and (orientation: landscape) {

  .container {

    padding: 20px;

    max-width: 90%;

  }

}



/* 或者更具体一点，横屏且宽度在 768px 以上 */

@media screen and (min-width: 768px) and (orientation: landscape) {

  .container {

    padding: 20px;

    max-width: 90%;

  }

}

另外检查一下你的 viewport meta 标签有没有写对：

这个很重要，很多布局问题其实根源在 viewport 没设好。

还有一点，如果你用的是 iPad，还要注意 iPadOS 会识别为桌面级浏览器，有时候 min-device-width 比 min-width 更可靠，不过现在一般用 min-width 就够了。

你先试试加上 orientation: landscape 看看效果。

2026-03-11 06:01