I try to make Fullscreen resolution in html, and it works perfectly fine for pc, but the problem is when you have mobile like android or iOS, the touch screen when I press anything, it goes down highlight, for example, let just say that I select options, and select BGM volume, when I click, it goes to BGS volume. See the video to understand: Issue fullscreen This is html code HTML: Chrono Engine (V0.2b)
I try to make Fullscreen resolution in html, and it works perfectly fine for pc, but the problem is when you have mobile like android or iOS, the touch screen when I press anything, it goes down highlight, for example, let just say that I select options, and select BGM volume, when I click, it goes to BGS volume. See the video to understand:
Issue fullscreen
This is html code
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="user-scalable=no">
<link rel="icon" href="icon/icon.png" type="image/png">
<link rel="apple-touch-icon" href="icon/icon.png">
<link rel="stylesheet" type="text/css" href="fonts/gamefont.css">
<title>Chrono Engine (V0.2b)</title>
</head>
<body style="background-color: black">
<style type="text/css"> CANVAS{image-rendering: pixelated;}</style>
<style>canvas { width: 100% !important; height: 100% !important; }</style>
<script type="text/javascript" src="js/libs/pixi.js"></script>
<script type="text/javascript" src="js/libs/pixi-tilemap.js"></script>
<script type="text/javascript" src="js/libs/pixi-picture.js"></script>
<script type="text/javascript" src="js/libs/fpsmeter.js"></script>
<script type="text/javascript" src="js/libs/lz-string.js"></script>
<script type="text/javascript" src="js/libs/iphone-inline-video.browser.js"></script>
<script type="text/javascript" src="js/rpg_core.js"></script>
<script type="text/javascript" src="js/rpg_managers.js"></script>
<script type="text/javascript" src="js/rpg_objects.js"></script>
<script type="text/javascript" src="js/rpg_scenes.js"></script>
<script type="text/javascript" src="js/rpg_sprites.js"></script>
<script type="text/javascript" src="js/rpg_windows.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
So I don't know what's the problem, but when I remove it, it will work fine but not responsive.
This is what I am using for full screen:
Ophelia FullScreen