Maybe you experienced this yourself. You visit a webpage, turn your mobile around and switch back again, and for whatever reason the background is broken. In my humble opinion, this comes from an unregistered viewport change, and I myself experienced this a few times, especially when I was visiting websites with beautiful background images. This behavior is quite annoying for the user. He or she can reload the page after the switch, but no one does.

I tried to figure out if to prevent the layout break in any way, and fortunately I can provide you with a little script. But foremost, let’s do some testing. JavaScript seems to have some quite clever solutions for reading out a screen orientation change. As window: orientationchange event is deprecated, I was able to read out the screen orientation with the screen: orientation property.

So with this I tried some window location.reload() and some other document.location.reload() methods. But unfortunately, this doesn’t prevent the background from being broken after the switch. The viewport was not transmitted to the background scaling. But the manual reload does this properly. So I used this code to imitate a manual reload.

<script type="text/javascript">
   screen.orientation.addEventListener
("change", (event) => { 
      location.replace("."); 
    });
</script>

You can test the behavior on this blog by switching the screen orientation, or get in contact for more information.

Featured image comes from pexels.