Changing device orientation doesn't swap width and height

detect orientation change javascript
jquery orientation change
device orientation javascript
how to rotate screen on samsung
how to rotate screen on iphone
how to rotate screen on ipad
cross browser screen orientation
auto-rotate screen

I'm trying to set the size of a background image to match the screen size upon window resize. The problem is that width and height don't alternate their values when I change the mobile orientation. When I test it in the dev tools of a desktop browser it works, however when testing in several mobile browsers, although the orientation does get changed, the measures don't.

This is the basic js:

$(function() {

    function resizeBackground() {
        $('#background-image').height(screen.height);
    }

    resizeBackground();
    $(window).resize(resizeBackground);

});

Unfortunately due to a weird vh bug on iOS I'm forced to use JS. The issue here is that the background image jumps when the browser address bar of some browsers, specially Chrome and Firefox, gets hidden. It's detailed here: stackoverflow.com/questions/24944925/.

Summarizing my comments I want to describe why your solution doesn't work:

window.screen.height and window.screen.width get you the device's actual height and width and these values don't change on page resize or orientation change.

For the viewport sizes (you actually need viewport) the appropriate methods (variables) are window.outerWidth and window.outerHeight (in some cases window.innerWidth and window.innerHeight will work also).

For getting actual document size (html document), use document.documentElement.clientWidth and document.documentElement.clientHeight.

For detecting orientation change I would suggest orientationchange event instead of onresize event, because onresize also fires when keyboard is shown for example.

Auto-rotate screen - Android Accessibility Help, If you're using TalkBack, you might want to turn off auto-rotate, since rotating the screen can interrupt spoken feedback. To change your auto-rotate setting, follow � If Inder Kumar Rathore's suggestion works, that's great. But the documentation describes the orientation property as being read-only, so if it works, I'm not sure you can rely on it working in the future (unless Apple does the smart thing and changes this; forcing orientation changes, regardless of how the user is currently holding their device, is such an obvious functional need).

Those mobile browsers should support the more specific orientationchange event. Perhaps they're only firing that one and not resize. Try handling orientationchange too.

window.addEventListener('orientationchange', resizeBackground);

Managing screen orientation, Screen orientation is something slightly different than device orientation. Even if a device doesn't have the capacity to detect its own orientation, One of the most common cases for orientation changes is when you want to� This method is what you would expect from a mobile API; a simple orientationchange event on the window: During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.

For Mobile Safari you can check window.orientation and if it is 90/-90, choose smaller of width/height for your "height". When orientation is 0, then choose higher value. I have now observed that when opening Mobile Safari directly in landscape, the values are swapped and do not swap on orientation change. As window.orientation is deprecated, it should only be used for Mobile Safari. FOr the rest, we use window.screen.orientation.angle.

Window: orientationchange event, window.onorientationchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); };� Actually this didn't work. If I lock the activity to portrait mode using the attribute screenOrientation="portrait" in the manifest, this doesn't work. This only tells what the screen orientation is, and not the detection of the screen orientation change. – ffleandro Nov 23 '11 at 23:25

Rotate the screen on your iPhone or iPod touch, Tap the Portrait Orientation Lock button to make sure that it's off. Turn your iPhone sideways. If the screen still doesn't rotate, try a different app� Right-click the device, and click Uninstall. Windows will prompt you to confirm the device’s removal. Click OK to remove the driver. After the uninstallation is complete, reboot your computer as soon as possible. I also suggest you to refer to the link below if you are unable to change the orientation in Edge.

Handling Device Orientation Efficiently in , What Does This Mean For Your Apps? To handle device rotation in your app, change the application's AndroidManifest.xml to tell Android� Hey, I was just about to add some media queries for the iPad to make the website look even better, but somehow some CSS rules drop out as I change the orientation of the device (portrait first

How to change the device orientation?, Device rotation (changing the device orientation from portrait to landscape) enables to preview how web apps look in different orientation states. To rotate the� Open “Settings” > “Display” > “When Device is Rotated“, then choose the desired setting: Rotate the contents of the screen Stay in current orientation

Comments
  • Both onresize and orinentationchange events fire on iOS Safari for sure, though the most appropriate for you would be orientationchange event, as onresize also occurs when keyboard is shown for example. Also I would suggest to use window.outerHeight instread of screen.height.
  • And if you need document height instead, I would suggest to use document.documentElement.clientHeight.
  • The point is that I don't need window.screen.width and window.screen.height to "change". It makes sense that they don't change since we're talking about the device's measure, however, when the device has its orientation changed, width and height should swap, shouldn't they? Concerning the event chosen, I'm going with onresize because I need the change not only when I change orientation, but also when the browser's address bar slides in and out provoking a window resize. Finally, by replacing screen.height by window.outerHeight the picture doesn't show up at all...
  • Unfortunately no change. Both resize and orientationchangeworked on the desktop browsers, but didn't on mobile.