2

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

Community
  • 1
  • 1
JG Trindade
  • 165
  • 1
  • 12
  • 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`. – Arman P. Mar 15 '17 at 20:13
  • And if you need document height instead, I would suggest to use `document.documentElement.clientHeight`. – Arman P. Mar 15 '17 at 20:14

3 Answers3

1

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.

Arman P.
  • 4,314
  • 2
  • 29
  • 47
  • 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... – JG Trindade Mar 15 '17 at 20:31
0

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);
GertG
  • 959
  • 1
  • 8
  • 21
  • Unfortunately no change. Both `resize` and `orientationchange`worked on the desktop browsers, but didn't on mobile. – JG Trindade Mar 15 '17 at 11:22
0

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.

Anton Mitsev
  • 602
  • 9
  • 15