Cookie Banner固定定位在移动端失效怎么办？

Zz富水提问于 2026-01-31 08:42:25 阅读 39

安全

最近在给网站加Cookie同意弹窗，用position:fixed定位在底部，PC端显示正常，但手机横屏时整个弹窗会被挤到页面外层了，这是什么情况啊？

尝试过这样写CSS：


.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #333;
  padding: 1rem;
}

但检查移动端调试工具发现，当屏幕宽度超过768px横屏时，弹窗突然脱离固定定位。试过加!important强制覆盖，设置z-index:9999，甚至包裹div用了position:relative，都没解决。是不是需要针对横屏单独写媒体查询？

隐私保护

我来解答赞 8 收藏

反馈

2 条解答

付敏🍀 Lv1

这个问题其实是移动端视口缩放导致 fixed 定位错位的经典坑。你不需要媒体查询，只需要在 fixed 定位的元素上加上：

width: 100vw;

把你的样式改成这样：

.cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100vw; /* 改成vw单位 */

  background: #333;

  padding: 1rem;

  z-index: 9999;

}

原因是移动端横屏时，浏览器地址栏会自动隐藏，视口宽度变大，用 width: 100% 会继承布局宽度而不是视口宽度，导致错位。换成 100vw 就是直接贴着视口宽度，不会被页面滚动或缩放影响。

复制这个写法，保证横屏竖屏都贴底显示。

2026-02-03 15:06

Mr.丽珍 Lv1

横屏时视口宽度变化导致固定定位失效，加这个就对了：

@media (orientation: landscape) {

  .cookie-banner {

    width: 100vh;

    height: 100vw;

    transform: rotate(90deg);

    transform-origin: left top;

  }

}

就这样，移动端横屏特么就得特殊处理。

2026-01-31 16:46