Apply mobile scaling
This commit is contained in:
parent
8ab88c8553
commit
5d406bd512
|
@ -210,7 +210,10 @@ toggleButtons
|
||||||
|
|
||||||
const correctTouchOffset = (x, y) => {
|
const correctTouchOffset = (x, y) => {
|
||||||
const canvasRect = canvas.getBoundingClientRect();
|
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 => {
|
canvas.ontouchstart = event => {
|
||||||
|
|
31
style.css
31
style.css
|
@ -32,4 +32,35 @@ body {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #222222;
|
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