Я работаю над клоном Flappy bird, который также работает на мобильных устройствах с использованием сервисных работников.Я также изучаю новые вещи об этих технологиях.
На рабочем столе все работало нормально, но на мобильном телефоне нижние трубки немного выше, чем должны.
Я использую эту конфигурацию окна просмотра мета:
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