Question

请在手机上查看以下页面：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="wide">WIDE</div>
  <div id="fixed">FIXED</div>
</body>
</html>

CSS：

#wide {
  background-color: blue;
  width: 120px;
}

#fixed {
  background-color: green;
  position:fixed;
  left: 0px;
  bottom: 0px;
}

固定元素位于右下方，符合预期。但是，当您增加宽div 的宽度超过设备视口宽度（以css像素为单位）时，固定的div会消失。

为什么会这样？有没有办法防止这种行为？

进一步详情：

测试此功能的一种简单方法是在Chrome DevTools中使用移动视图，并直接在Elements＆gt;下更改宽度。样式。
接近限制宽度，您会看到固定div水平切断。
没有meta viewport的情况相同，但阈值将是默认视口宽度980px。
在height: 100%和min-height:100%上尝试html和body的组合，但没有成功。
桌面浏览器没有问题。

Answer 1

不确定这是否会对您有所帮助，但我已将document.addEventListener("keyup", () => { // code to update the progressbar styles here }, false);添加到#wide。这样你的div就不会超过最大宽度。

Answer 2

在这里回答我自己的问题。

我不确定为什么没有渲染固定div。它与某种事实有关，即“宽”div溢出了body元素，导致视图缩小，并且身体最终比视口更高。我仍然认为移动浏览器应该像桌面浏览器一样显示固定元素。

我的修复：使用overflow-x: scroll将宽内容包装在容器元素中。这在移动设备上运行良好，固定div再次显示，宽屏内容可以刷过。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="ctnr">
    <div id="wide">WIDE</div>
  </div>
  <div id="fixed">FIXED</div>
</body>
</html>

CSS：

#ctnr {
  overflow-x: scroll;
}

#wide {
  background-color: blue;
  width: 120px;
}

#fixed {
  background-color: green;
  position:fixed;
  left: 0px;
  bottom: 0px;
}

底部固定元素在移动

2 个答案: