50

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?

Marc
  • 2,659
  • 3
  • 34
  • 41
Evanss
  • 23,390
  • 94
  • 282
  • 505
  • 1
    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](https://api.jquerymobile.com/orientationchange/): `Note that we bind to the browser's resize event when orientationchange is not natively supported or if $.mobile.orientationChangeEnabled is set to false.` – Josiah May 23 '15 at 19:32

6 Answers6

84

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

Leonard
  • 648
  • 6
  • 19
Marc
  • 2,659
  • 3
  • 34
  • 41
  • 2
    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 – binaryfunt Oct 11 '16 at 12:06
  • 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. – Marc Oct 11 '16 at 15:27
  • 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 – marquesm91 Mar 21 '18 at 21:18
  • 2
    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. – Simon_Weaver Sep 15 '18 at 06:08
  • The `orientationchange` event is now [deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event) and is already phased out of chrome, firefox, edge and opera, you need to use [`screen.orientation.addEventListener('change', cb)`](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation) instead. – Tofandel Jul 21 '23 at 09:17
4

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

Toskan
  • 13,911
  • 14
  • 95
  • 185
2

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);
Samuel Philipp
  • 10,631
  • 12
  • 36
  • 56
dorian
  • 21
  • 1
  • Problem with this is that `window.dispatchEvent(new Event("resize"))` won't trigger any handlers registered via `$(window).resize()`. – thdoan Sep 15 '19 at 07:38
2

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

Trevor Burnham
  • 76,828
  • 33
  • 160
  • 196
0

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
    }
}
John Gimbel
  • 1
0

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 :/

obzenner
  • 355
  • 3
  • 12