Apply mobile scaling
This commit is contained in:
parent
8ab88c8553
commit
5d406bd512
|
@ -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 => {
|
||||
|
|
31
style.css
31
style.css
|
@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue