Improve scaling on small phone screens.

... at the expense of pixel perfection. :(
This commit is contained in:
David Thompson 2024-06-03 12:18:19 -04:00
parent ecd6cc669b
commit 5bccb7c7f6

View file

@ -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) {