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

Question

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

div中有一个居中框。

div被设置为高度:100vh宽度: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/

Answer 1

我会尝试使用@media(maxwidth: __px){}。只是为了让用户在使用特定尺寸的屏幕时，从相同的代码中获得不同的效果。我从来没有使用过手机，但如果你还没有使用过@media，值得一试。