Question

我正在研究Flappy鸟类克隆，它可以在使用服务工作者的移动设备上运行。我也在学习有关这些技术的新知识。

在桌面上似乎一切正常，但在移动设备上，底部管道显示出比应有的高一些。

我正在使用此元视口配置：

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title> FLAPWAPP </title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>

    <body>
        <div id="gamecanvas">
            <div id="sky"></div>
            <div id="playspace">
                <div id="skylimit"></div>
                <div id="bird" class="bird"></div>
            </div>
            <div id="land"></div>
        </div>
        <script>
            if('serviceWorker' in navigator) {
                navigator.serviceWorker
                    .register('sw.js')
                    .then(function() { console.log("Service Worker Registered"); });
            }
        </script>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

CSS

.pipe 
{
    position: absolute;
    height: 100%;
    z-index: 5;
    width: 52px;
    left: -100px;
    animation: pipeAnimation 7500ms linear;
}

.pipe_upper
{
    position: absolute;
    top: 55px;
    width: 52px;
    background-image: url('../assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}

.pipe_upper:after
{
    content: "";
    position: absolute;
    bottom: 0;
    width: 52px;
    height: 26px;
    background-image: url('../assets/pipe-down.png');
}

.pipe_lower
{
    position: absolute;
    bottom: 0;
    width: 52px;
    background-image: url('../assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}

.pipe_lower:after
{
    content: "";
    position: absolute;
    top: 0;
    width: 52px;
    height: 26px;
    background-image: url('../assets/pipe-up.png');
}

这可能是什么？您可以在我的github上查看完整的源代码：github

Answer 1

这是因为android基于linux。所以你的一些css代码可能被android忽略了。找到代码，并在其上使用webkit。

Answer 2

问题已在此处解决：https://github.com/llucmk/FLAPWAPP/blob/master/js/main.js

存在与javascript和对象位置有关的问题，没有给出正确的位置。

html对象无法显示移动设备上应该显示的位置

2 个答案: