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
21
game.css
21
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) {
|
||||
|
|
Loading…
Add table
Reference in a new issue