无法在手机上滚动我正在开发的游戏

Question

我目前正在开发一款名为 Townsville 的游戏。
在这里玩：https://townsville-game-online.on.drv.tw/play

通过最新更新，我已将此代码添加到我的 styles.css 文件中：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

使其位于屏幕中央。

目前是：

#board {
    width: 720px;
    height: 540px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

当我在笔记本电脑、PC 和 iPad 上测试此代码时，一切都很好。但是当我使用手机时，该板有一半在屏幕之外，我无法滚动以到达屏幕外的部分。 请帮助我，这样我可以滚动或做一些事情来解决这个问题。

谢谢， SuperGamer747 (SuperGamer474)

Answer 1

发生这种情况是因为您的#board元素具有固定的高度/宽度。

你能做什么？

#board{
height:100%;
width:100%;
}

#startScreen{
width:inherit;
height:inherit;
}

这样做将使您的容器自动调整用户客户端设备屏幕尺寸。

重要！

CSS 中的元素有默认值。如果您想调整元素的完整大小，则必须使用以下方法重置这些值：

*{
padding:0;
margin:0;
box-sizing:border-box;
}

html,
body{
height:100%;
}

现在你甚至不需要将div居中于body的中心，所以你可以删除

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

您使用图像来制作图形，应该使用它来代替画布元素，但这可能很困难。

如果调整页面大小，您可能会发现图像会重复，如何避免这种情况？

#startScreen{
background-repeat: no-repeat;
    display: block;
    background-image: url(resources/Title.png);
    background-size: cover;
}

按钮和您放置在页面中的每个元素都是固定的，因此它们会在调整大小时浮动。尝试使用我在这里所说的并调整它们！