diff --git a/game.css b/game.css index e65aea7..4f9a509 100644 --- a/game.css +++ b/game.css @@ -13,9 +13,24 @@ body { height: 100vh; } -canvas { - display: block; - margin: auto auto; +/* Scale up canvas image on small screens. Loses pixel perfectness + but improves visibility on phones. */ +@media (max-width: 960px) or (max-height: 720px) { + canvas { + display: block; + margin: auto auto; + image-rendering: pixelated; + object-fit: contain; + width: 100%; + height: 100%; + } +} + +@media (min-width: 960px) or (min-height: 720px) { + canvas { + display: block; + margin: auto auto; + } } @media (pointer: fine) {