Apply mobile scaling

This commit is contained in:
Oystein Kristoffer Tveit 2020-11-21 04:58:13 +01:00
parent 8ab88c8553
commit 5d406bd512
2 changed files with 35 additions and 1 deletions

View File

@ -210,7 +210,10 @@ toggleButtons
const correctTouchOffset = (x, y) => {
const canvasRect = canvas.getBoundingClientRect();
return [x - canvasRect.left, y - canvasRect.top];
return [
(x - canvasRect.left) * canvas.width / canvasRect.width,
(y - canvasRect.top) * canvas.width / canvasRect.width
];
}
canvas.ontouchstart = event => {

View File

@ -32,4 +32,35 @@ body {
border-radius: 10px;
color: white;
background-color: #222222;
}
@media screen and (max-width: 600px) {
body {
margin: 0;
}
#canvas {
border: solid black 2px;
border-radius: 10px;
background-color: wheat;
margin: 1em 0;
width: 80%;
}
#toggleButtons {
margin-bottom: 1em;
}
#toggleButtons * {
font-size: 1em;
}
#response {
font-size: 1em;
margin-bottom: 0.5em;
}
#clear{
font-size: 0.7em;
}
}