Three js window resizing after raycaster (clicking 3D object) issue on mobile

Questions
1

I’m using Three js and I have an issue on mobile envirionment.

I used meta viewport tag:

<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" >

and initializing Threejs’s canvas with following code.

function init(){
  container = document.createElement( 'div' );
  container.setAttribute('class', 'canvas');
  container.style.width = preMetaWidth;
  container.style.height = preMetaHeight;
...
}

The problem is, when I run the web on mobile, it’s size is fine when I just run.

However, when I called some Three.js event, like raycaster to click 3D object, the <body> size is changing as not I coded.

I never set changing it’s size, but when resizing window.

...
function onWindowResize(){
  if(deviceInfo == 0)
	  renderer.setSize( window.innerWidth, window.innerHeight );
  else
  	  renderer.setSize( preMetaWidth, preMetaHeight );
  ...
}

As I checked with chrome debugger, When I run the web, the size is fine.

But after I call some events like ray-caster to click 3D object,

The whole HTML is being resized.

I want it to let has device’s real view size, but it doesn’t work.

So I tried to let it has real size with:

const preMetaWidth = window.innerWidth;
const preMetaHeight = window.innerHeight;

and using it on function init() and function onWindowResize(), but also doesn’t work.

How can I let it has device’s real size for whole running time?

I don’t want it to change it’s size at it’s will.

Thank you for your help.

2

/cc

3

Try

const preMetaWidth = window.innerWidth;
const preMetaHeight = window.innerHeight;

instead of

const preMetaWidth: window.innerWidth;
const preMetaHeight = window.innerHeight;

4

on actual code I typed right. :slight_smile: i edit it. thanks