What's the javascript event of window rotate or toggle different device?

Question

I was browsing to a webste with Chrome, I turned on the Inspect ( Ctrl + Shift + I ) and then I was trying to trace what javascript chart library it's using.

But I find out when I click the "Toggle Device Tollar" and switch to the mobile mode (vice versa) or press rorate when on mobile mode .

The website knows those behaviors and reload whole page. Not just responsive CSS but actually re-request the whole page such as the behavior of presssing F5 on the web page.

I was trying to find the javascript event to know how it detect these behaviors(toggle on device and rorate) and do reload, but I couldn't find it via break point in the Chrome dugger.

Any ideas how this website makes it?

before pressing "toggle device toolbar"

after pressing "toggle device toolbar"

Answer 1

You are looking for this:

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

Refer to the documentation.

Answer 2

The orientationchange event is fired when the orientation of the device has changed. This link may be helpful https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange

// Note that "orientationchange" and screen.orientation are unpre fixed in the following
// code although this API is still vendor-prefixed browsers implementing it.

    window.addEventListener("orientationchange", function() {
        alert("the orientation of the device is now " + screen.orientation.angle);
    });