The issue you're experiencing with Chrome on iPhone providing incorrect window.innerWidth and window.innerHeight after orientation changes is a known bug that has affected various versions of Chrome on iOS.

To work around this issue, you can use the resize event to recalculate the dimensions of the window after the orientation change. Here's a sample code snippet to help you handle the orientation change and recalculate the dimensions correctly:

javascript
let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; window.addEventListener('resize', () => { // Check if orientation has changed if ( (window.matchMedia && window.matchMedia('(orientation: portrait)').matches) || (!window.matchMedia && windowWidth > windowHeight) ) { // Portrait orientation windowWidth = window.innerWidth; windowHeight = window.innerHeight; } else { // Landscape orientation windowWidth = window.innerHeight; windowHeight = window.innerWidth; } // Now you have the correct dimensions in windowWidth and windowHeight });

The code above listens for the resize event and checks if the orientation has changed by comparing the window width and height before and after the resize. If the orientation has changed, it updates the windowWidth and windowHeight variables accordingly.

Keep in mind that the issue is related to Chrome on iOS, and other browsers on iOS may handle orientation changes differently. Therefore, it's essential to test your code in various browsers and devices to ensure compatibility.

Additionally, since this issue may be resolved in future Chrome updates or iOS versions, it's a good practice to monitor the bug reports and changelogs to see if a permanent fix becomes available.

Have questions or queries?
Get in Touch