answers ^#blog


Screen orientation reloaded
Screen orientation reloaded

Screen orientation reloaded

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.

This is a solution with:

JavaScript

Featured image comes from pexels.

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.

This is a solution with:

JavaScript

Featured image comes from pexels.

furthermore

Browsers render different

Make footer lines static in WordPress

Adding a gradient as background in WordPress

Merry Christmas everybody

Light and dark vs. black and white

Release note

Screen orientation reloaded

Aspect ratio Media Query

Losing focus

answers

^#blog


3close Agency UG Logo

by commenting this article, you agree to the privacy policy & the storage of the personal data you provide.

Leave a Reply

Your email address will not be published. Required fields are marked *