# Responsiveness Problem On Mobile Phone After Landscape

**URL:** <https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774>\
**Category:** Questions\
**Tags:** mobile, responsive\
**Created:** [April 28, 2021, 11:01am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774 "2021-04-28T11:01:18Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [April 28, 2021, 11:01am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/1 "2021-04-28T11:01:18Z")

</div>

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:

 ![WhatsApp Image 2021-04-28 at 14.36.21](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a9595519e3a905c6adf6f9f1770571d02824ef54.jpeg)

 ![Ekran Resmi 2021-04-28 14.38.33](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/4/14a873f50c784106b7ce9992d599c5dbb5ebe801.jpeg)

You can see the project in the link and also my code for resizing at the below.  
[https://netzade.com/3d/room](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);`

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [April 28, 2021, 11:19am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/2 "2021-04-28T11:19:37Z")

</div>

Sorry but can you actually tell what the problem is?

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [April 28, 2021, 11:40am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/3 "2021-04-28T11:40:29Z")

</div>

i put the reference pictures about issue

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [April 28, 2021, 1:26pm UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/4 "2021-04-28T13:26:51Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event) 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()
    }
}
```

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [April 28, 2021, 8:48pm UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/5 "2021-04-28T20:48:54Z")

</div>

thanks for your help but unfortunately the problem goes on

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [April 30, 2021, 11:46am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/6 "2021-04-30T11:46:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![georgewaraw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/georgewaraw/32/6497_2.png) [@georgewaraw](https://discourse.threejs.org/u/georgewaraw)\
**Post date:** [April 30, 2021, 1:29pm UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/7 "2021-04-30T13:29:35Z")

</div>

Maybe this will work:

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

---

<div class="post-metadata">

**Author:** ![Hayden](https://avatars.discourse-cdn.com/v4/letter/h/91b2a8/32.png) [@Hayden](https://discourse.threejs.org/u/Hayden)\
**Post date:** [April 30, 2021, 7:57pm UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/8 "2021-04-30T19:57:25Z")

</div>

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()?

---

<div class="post-metadata">

**Author:** ![Ben\_Jack](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben_jack/32/16794_2.png) [@Ben\_Jack](https://discourse.threejs.org/u/Ben_Jack)\
**Post date:** [May 1, 2021, 12:30pm UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/9 "2021-05-01T12:30:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MixTeR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mixter/32/26747_2.png) [@MixTeR](https://discourse.threejs.org/u/MixTeR)\
**Post date:** [May 2, 2021, 3:23am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/10 "2021-05-02T03:23:19Z")

</div>

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();  
});

---

<div class="post-metadata">

**Author:** ![oldboy](https://avatars.discourse-cdn.com/v4/letter/o/aca169/32.png) [@oldboy](https://discourse.threejs.org/u/oldboy)\
**Post date:** [August 19, 2023, 2:22am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774/12 "2023-08-19T02:22:46Z")

</div>

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.