Will $(window).resize() fire on orientation change?

Question

Im using this to run some code when a browser window is resized: $(window).resize(callback)

I also need to run this code when the orientation is changed in phones and tablets. Will the above fire on this event?

Miscarriage

It will fire. I think this is a useful question but it's closed so I can't answer it. Here's background from the jquery docs: Note that we bind to the browser's resize event when orientationchange is not natively supported or if $.mobile.orientationChangeEnabled is set to false. – Sphingosine

Answer 1

Some devices/browsers do, some not. You need to decide your supported browsers and devices.

If you want to be on secure side you should use the resize event and get/check the sizes inside in it; if you know your desired devices go with a simple orientation change:

Easy solution:

// Listen for orientation changes      
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

More secure/supported

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

David Walsh wrote a good article about resize and orientation change event. More about orientation change and sizes here: http://davidwalsh.name/orientation-change

Adamantine

If I understand the question correctly, both solutions are needed, as the OP wants the same code to run if the window is resized or if the device orientation changes. Unless you're saying the vanilla JS resize option is more widely supported than the jQuery one – Shelled

If you decide to support older browsers you can got with the more secure supported second mentioned solution. you obviously need to add the calculation logic wich covers the orientation change. – Adamantine

If you use the "more secure/supported" how to handle when user zoom in/out on mobile browser? Everytime I zoom'ed I triggered Resize event – Saccular

It's not just that some do and some don't - it's that some do sometimes. Even on iPhone with ios11 I'm seeing the resize even not always firing when I rotate. But then I'll scroll and it will update. Combining both makes it always instant. Just make sure to only handle one change (only run your code when it really has changed from the last time you ran calculations) and not two. – Donnelly

The orientationchange event is now deprecated and is already phased out of chrome, firefox, edge and opera, you need to use screen.orientation.addEventListener('change', cb) instead. – Downatheel

I find the answers and comments a bit confusing. To sum this up, if you want to be sure that both events are always and in any browser covered the solution would be: window.addEventListener("resize", function() { // do something }, false); screen.orientation.addEventListener("change", function() { // do something }, false); Correct? – Puffball

Answer 2

the answer is imho: no

but:

$(window).on('resize orientationchange', function(){
//do stuff
});

should have you covered

careful, this can trigger twice depending on the browser

Frederik

Answer 3

My solution:

1. Generate an event when orientationchange doesn't do it
2. use a throttle to prevent to much update on resize (lodash library for instance)

window.addEventListener("resize", throttle(function() {
    //to do when resize
}, 50), false);

window.addEventListener("orientationchange", function() {
    // Generate a resize event if the device doesn't do it
    window.dispatchEvent(new Event("resize"));
}, false);

Luciennelucier

Problem with this is that window.dispatchEvent(new Event("resize")) won't trigger any handlers registered via $(window).resize(). – Gourmandise

Answer 4

Quirksmode directly tested this question and found that the native resize event fired on orientation change in all browsers other than Opera Mini: https://www.quirksmode.org/dom/events/resize_mobile.html

Jamiejamieson

Answer 5

A simple solution is to pass a value based on the event type..

window.addEventListener('resize', function () {
    myFunction('resize');
});

window.addEventListener("orientationchange", function() {
    myFunction('orientation');
});

function myFunction(value) {
    if (value == 'resize') {
       // do something
    } else if (value == 'orientation') {
       // do something else
    }
}

Illuminating

Answer 6

since orientationchange event has been deprecated, it's now possible to use screen.orientation.onchange Deprecated: Window: orientationchange event

i.e.

const resizeScreen = debounce(async () => {
   await animateWithNewDimensions();
}, 50);
window.screen.orientation.onchange = resizeScreen;

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation#browser_compatibility

Too bad Safari is not supporting this :/

Systematist