How to get Fullscreen 1 to 1 background on Mobile

I’m trying to get touchevents working for my mobile game in threejs. But the controls dont work because it keeps scrolling! even though I have event.preventdefault . I would debug it in Chrome DevTools but it actually works in DevTools, but on my Pixel 3a it doesnt work

GitHub Link to Project:

Heres a link to my game

i made a quick YouTube video too to show me attempting to use it

this is the render setup code

const canvas = document.querySelector(’#c’);

renderer = new THREE.WebGLRenderer( { canvas, antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth/2, window.innerHeight/2, false );
document.body.appendChild( renderer.domElement );

renderer.gammaFactor = 2.2;//Correcting the scenes Gamma Values
renderer.gammaFactor = true;
renderer.outputEncoding = THREE.GammaEncoding;

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 20;
camera.position.y = 15;
//controls.update() must be called after any manual changes to the camera's transform
1 Like

I don’t have a Pixel around to test on, but you can try using CSS to limit the viewport:

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
1 Like

Ive already tried that unfortunately :confused: i dont think that it is specifically a pixel 3a problem. it should be replicated with mobile devices

It Seems to have fixed itself. I tmayb have been a Z-Index issue anyway thanks

So I tried every trick under the sun when confronted by this, but Safari block all attempts. I was trying to make a dependency free plugin (not threejs related), eventually I figured I’d look at some npm packages out there. This one right here works REALLY WELL, it’s the only thing that’s going to fix this issue for you on Safari


that is great, thank you