Code Injection for Mobile Version of Site to Account for Screen Rotation

Site URL: http://www.ericsnoza.com

@paul2009 provided the perfect solution to an issue of guiding viewers of my site to a "mobile" version based on the screen size. A brilliant solution that worked perfectly.

<script>
if (document.documentElement.clientWidth <720) {
 window.location = "/mobile/home";
}
</script>

My query is that I would also like to account for screen rotation, so that if they come to my site and are guided to the mobile (portrait) version, and then rotate their screen, the page will change/reload to the standard (landscape) version of my site - and vise versa - while they are in landscape and rotate to portrait, it would revert to the mobile version.

Let me know if I can provide any additional information to help.

Thanks!

The code above runs once, and is done. What you're talking about sounds like you want it to happen every time the orientation changes. There is an event listener for orientation change. So we could say, "also, when the orientation changes, if the width is less than 720 (as the code above says), go to mobile/home, otherwise,...." But then, what about if someone resizes the screen by just grabbing the edge of a window and shrinking or enlarging it?

For this reason, I think most (if not all) of the sites are mobile responsive already. Or you could just add mobile responsive styling (CSS) to your mobile site to accomplish what you're looking to do, instead of reloading the page. I think as a user, I wouldn't like that reload experience, and so would caution against going down that path, but I don't know all the details which lead to this decision. 

Although, I'm sure @paul2009 will see this post soon, if he hasn't already, and since you share some history, he can better help here.

@tazmeah Thank you for your input! Using the event listener for orientation change sounds like it would be a nice solution. I know that reloading on orientation is not the most elegant solution, but to my knowledge, there is no way to have the site recognize the orientation of the background video/photo that is playing and use the appropriate version of the video/photo (landscape vs portrait). You can see this on my site pages (home, photo, video)

If there are CSS options available to do this, or even another method I am not aware of, I am open to making any changes I need to.

Thanks!