如何摆脱移动设备上烦人的 y 移动和滚动条？答案

【问题标题】：How can I get rid of annoying y movement and scroll bar on mobile devices?如何摆脱移动设备上烦人的 y 移动和滚动条？
【发布时间】：2021-08-28 02:44:07
【问题描述】：

如何摆脱移动设备上烦人的 y 移动和滚动条？

我在 div 中有一个居中的框。

div 设置为 height: 100vh width: 100vw 以便它应该完全占据整个屏幕。即不应在 x 或 y 方向上滚动。

在移动设备上，没有像预期的那样在 x 方向上滚动，但在移动设备上却在 y 方向上滚动。

PC 按预期工作。

是什么导致了这种奇怪的效果？我没有一个简单的方法来调试移动设备，所以我很难用它。

此外，该框实际上比我的移动设备的中心高，但在 PC 浏览器中完全居中。

相关的 CSS 是：

body{
  margin: 0px;
  padding: 0px;
}
.page{
  display: flex;    
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh
}
.box{
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);    
  background: rgba(255,255,255,0.5);
  font-family: arial;
  font-weight: bold;
  border: 0px solid #000000; 
  border-radius: 5px;
}

完整的小提琴是：

https://jsfiddle.net/ysg8wocn/1/

【问题讨论】：

标签： html css mobile

【解决方案1】：

我会尝试使用@media(maxwidth:___px) {}。只是为了让使用一定尺寸屏幕的用户在相同的代码中会有不同的效果。我从未使用过移动设备，但如果您还没有使用过@media，那么值得一试。

【讨论】：