different javascript/jQuery function by screen orientation on mobile AND browser

Question

Disclaimer: I am not a javascript or jQuery expert.

This is probably an easy problem to solve, as it's just a small fix I can't figure out. I am implementing a site that is horizontal if the browser is in landscape mode, and vertical if in portrait. CSS changes are not an issue as that is easy with media queries. The problem I run into is when I want to only run a specific script when the screen is in landscape mode. Next problem I run into is that I don't just want this to work on mobile, but I also want it to be responsive in a standard browser as well; i.e. detect when the screen width > screen height and run said script. Here is my code so far:

var height = $(window).height();
var width = $(window).width();
if (width > height) {
    //run landscape script
} else {
    //run portrait script
};

This is working just fine to detect orientation when the page loads, but it doesn't change when the screen is resized since the script is not bound to window.resize. That being said, it is also not working when I bind it to window.resize.

Is there a better way to go about this? Or do I just need to fix up what is already here?

I'm not very familiar with writing JavaScript for mobile devices as I mostly write it for desktop web applications. However, you may be able to find something useful in jQuery Mobile since you're already using jQuery anyway. It's a jQuery framework dedicated to mobile device support. Hope this helps. Best of luck. — War10ck
– War10ck, Commented Dec 14, 2012 at 16:29

Devin Young · Accepted Answer · 2012-12-14 16:45:47Z

3

In case somebody else runs into this problem in the future, I'll post what solved my problem.

When I attempted to add the resize event to the function, my code looked like this:

$(window).on('resize', function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > height) {
        //run landscape script
    } else {
        //run portrait script
    };
)};

This worked just fine, but it did not appear that way because the script was only being fired when the browser resized. While this is essential, the script also needs to fire when the page loads. My solution was just to add 'load' to the event:

$(window).on('resize load', function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > height) {
        //run landscape script
    } else {
        //run portrait script
    };
)};

answered Dec 14, 2012 at 16:45

Devin Young

8417 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Morpheus Over a year ago

You should check what device supports: resize or orientationchange

Collectives™ on Stack Overflow

different javascript/jQuery function by screen orientation on mobile AND browser

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related