Improve scaling on small phone screens.
... at the expense of pixel perfection. :(
This commit is contained in:
parent
ecd6cc669b
commit
5bccb7c7f6
1 changed files with 18 additions and 3 deletions
15
game.css
15
game.css
|
@ -13,9 +13,24 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Scale up canvas image on small screens. Loses pixel perfectness
|
||||||
|
but improves visibility on phones. */
|
||||||
|
@media (max-width: 960px) or (max-height: 720px) {
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto auto;
|
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) {
|
@media (pointer: fine) {
|
||||||
|
|
Loading…
Add table
Reference in a new issue