From 5bccb7c7f6f4b3f6531fa6dbe58cc65d2f5f7022 Mon Sep 17 00:00:00 2001 From: David Thompson Date: Mon, 3 Jun 2024 12:18:19 -0400 Subject: [PATCH] Improve scaling on small phone screens. ... at the expense of pixel perfection. :( --- game.css | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) 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) {