/* mobile-game.css
Reusable browser-behavior reset for fullscreen HTML5/WebGL games.
Safe to copy into small game projects.
Usage:
*/
:root {
/* Safe-area variables are useful on iPhones with a notch / Dynamic Island. */
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
/* Helps avoid odd text resizing in mobile browsers. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Prevent accidental horizontal movement caused by oversized content. */
max-width: 100vw;
background: #000;
}
/*
Recommended outer container for the game.
position: fixed + inset: 0 keeps it attached to the viewport and avoids
normal webpage scrolling.
*/
#game,
.game-root {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* WebGL / 2D canvas */
canvas,
#game-canvas,
.game-canvas {
display: block;
width: 100%;
height: 100%;
border: 0;
outline: none;
touch-action: none;
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/*
Useful for HUD/buttons layered above the canvas.
The container itself ignores pointer events; enable them on actual controls.
*/
.game-hud {
position: absolute;
inset: 0;
pointer-events: none;
padding:
var(--safe-top)
var(--safe-right)
var(--safe-bottom)
var(--safe-left);
}
.game-hud button,
.game-hud input,
.game-hud select,
.game-hud textarea,
.game-hud [data-interactive] {
pointer-events: auto;
}
/* Prevent images inside the game UI being dragged or selected. */
#game img,
.game-root img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
/*
Optional landscape helper.
Add class="landscape-only" to .
This does not force device rotation; it only lets you show your own message.
*/
.rotate-device-message {
display: none;
position: fixed;
inset: 0;
z-index: 999999;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
box-sizing: border-box;
background: #000;
color: #fff;
font: 600 1.2rem/1.4 system-ui, sans-serif;
}
@media (orientation: portrait) {
body.landscape-only .rotate-device-message {
display: flex;
}
body.landscape-only #game,
body.landscape-only .game-root {
visibility: hidden;
}
}
/*
Accessibility escape hatch:
Add class="allow-selection" to any text you intentionally want selectable.
*/
.allow-selection,
.allow-selection * {
user-select: text !important;
-webkit-user-select: text !important;
-webkit-touch-callout: default !important;
}