Currently, I am developing a mobile-web application using three.js.
I have incorporated the meta viewport tag as well:
<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" >The issue I am facing is that the canvas is being resized after raycasting for click events.
The element.style attribute of the canvas has been altered:
<canvas width="1081" height="2029" style="width: 980px; height: 1081px;">
changed to
<canvas width="1081" height="2029" style="width: 412px; height: 773px;">
<!--
and the change in size depends on the screen size of the phone... mine was 412 x 773.
-->
I am unsure about where the canvas's style is being changed and set...
To address this issue, I added the following CSS codes:
.canvas{
width: devicve-width !important;
height: device-height !important;
}
canvas{
width: devicve-width !important;
height: device-height !important;
}
However, these changes did not resolve the problem.
The desktop version of the web application works perfectly, but the mobile version encounters this error.
I have not explicitly reset the canvas's size anywhere, so I am uncertain about what steps to take next.
At this point, there are many lines of code (none of which resize the canvas), which leaves me feeling quite puzzled.
Are there any specific methods in three.js to define the canvas's size?
Or perhaps a workaround to prevent this resizing issue?
Your assistance is greatly appreciated.