防止 Google 协作平台页面上的移动设备垂直滚动？

Question

我有一个简单的网站，由于某种原因，在移动设备上查看时有垂直滚动。

它很短，不应该强迫人们滚动。

任何人都可以帮助我理解为什么这个网站虽然长度很短但有垂直滚动条？

Answer 1

添加全屏覆盖 div，并带有用于旋转手机的居中警报。

设置

style="display: none;"

并设置它的

z-index="-1"

<div id="rotate-alert-overlay" style="display: none;">
  <div class="rotate-alert-content">
    <p>Please rotate your device to landscape mode for better viewing.</p>
  </div>
</div>

包含将显示样式设置为

none

的 JavaScript，除非

page width > page height

此时应将其删除。

window.addEventListener("resize", function() {
  const overlay = document.getElementById("rotate-alert-overlay");
  if (window.innerWidth > window.innerHeight) {
    overlay.style.display = "none";
  } else {
    overlay.style.display = "";
  }
});

或者最专业的：

window.addEventListener("resize", () => document.getElementById("rotate-alert-overlay").style.display = window.innerWidth > window.innerHeight ? "none" : "";);

您还可以添加此 CSS 以显示更好的警报覆盖：

#rotate-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  display: none; /* Initially hidden */
  z-index: -1; /* Initially positioned behind content */
  justify-content: center;
  align-items: center;
  text-align: center;
}

.rotate-alert-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
}