Responsiveness Problem On Mobile Phone After Landscape

[turkkan]

Hi everyone,

I have a problem about resizing the render on mobile phone after device orientation has changed.

Don’t mind the css responsiveness. I m aware of it i am not done with css yet.

I think the problem might be about iphone. I dont know.
I tried on iphone 7, iphone x, ipad 12 pro. All have problem

I tried also on huawei p30 lite. For resizing there is no problem.

Pictures:

You can see the project in the link and also my code for resizing at the below.
https://netzade.com/3d/room

Resize:

function OnContextResized() {
        // Update sizes
        sizes.width = window.innerWidth
        sizes.height = window.innerHeight

        // Update renderer
        renderer.setSize(sizes.width, sizes.height)
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

        // Update camera
        camera.aspect = sizes.width / sizes.height
        camera.updateProjectionMatrix()

        //Update controls
        if (camera == indoorCamera)
            controls.reset(camera, canvas)
    }

Event Listener
window.addEventListener("resize", OnContextResized);

[Fluqz]

Sorry but can you actually tell what the problem is?

[turkkan]

i put the reference pictures about issue

[Fluqz]

As far as I know, resize event does not necessarily fire on orientation change. This is device/browser specific? I wanted to suggest the orientationchange Event, but as stated in MDN it is depricated already. I cannot find any alternative event for that matter.
Is the resize event the new standard for both resize and orientation change? Does someone know?

Update: I just tested the resize event on my Iphone 6 and it does fire on orientation change. Did you check if it is firing for you at all?

To really detect orientation change and also portrait and landscape, you can write a function like this, that is fired inside the resize event:

function checkOrientation() {
    if(window.innerWidth > window.innerHeight) return 'landscape'
    else return 'portrait'
}


let orientation: string

function onresize() {


    if(orientation !== checkOrientation()) {  

       // changed 
   
       orientation = checkOrientation()
    }
}

[turkkan]

thanks for your help but unfortunately the problem goes on

[Fluqz]

Did you check if your resize function is called on orientation change?

[georgewaraw]

Maybe this will work:

window.addEventListener( “resize”, OnContextResized );
window.addEventListener( “orientationchange”, OnContextResized );

[Hayden]

I believe sometimes there is a delay between the orientation change and the height/width values updating so maybe try using setTimeout to delay your OnContextResized()?

[Ben_Jack]

Aaah I spent ages on this issue a month or so back.
There are two solutions, one kludge and one OK solution.
The kludge is as the above comment says to detect the window change as normal and if its IOS Safari set a timeout for 100 milis before executing the code that asks the window/containers size. For whatever reason the size updates are delayed on ios safari.
The more elegant solution is to instead of listening to resize events or orientation change events, use the resizeobserver api (look it up on mdn Web docs, also note compatibility on caniuse) this will give you the correct dimensions for all devices (that support the api). I’m on my phone so can’t give code - let us know how that goes.

[MixTeR]

This work for me

SCSS

#canvas{
position: relative;
width: 100%;
height: 100%;
}

HTML

Javascript (TypeScript)
this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000);
window.addEventListener( ‘resize’, ()=> {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
});

[oldboy]

This is caused by an iOS bug to my knowledge. You can use setTimeout(()=>{},N) to set an N delay before executing any code that depends on innerWidth and innerHeight values as a workaround. I needed to set a delay of at least 55 milliseconds when testing on my local machine for instance.