0

JS

if (screen.width <= 768 && screen.width != 1024) { 
     jQuery('.menu-link').bind("click touchstart", function() {
          if (jQuery('#wrap3').css("left") === "0px"){
              jQuery('#wrap3').animate({"left":"17%"}, 50);
          }
          else {
              jQuery('#wrap3').animate({"left":"0"}, 50)
          }
     });
  }

I originally tried it like this

if (screen.width <= 768)

It works fine in portrait, but it works in landscape, when it shouldn't.

How can I fix this?

It also doesn't work on desktop which is what I wanted.

On a side note - is this the common practice for creating different JS for different mobile widths? The reason I am using JS instead of CSS3 is because the animations I'm trying to do did not work on ipad.

user3427494
  • 33
  • 8

1 Answers1

0

Could you do something like checking the height vs width?

if (window.innerheight>window.innerWidth)
{
    alert("Landscape Please!");
}

Source: Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

Community
  • 1
  • 1
nixkuroi
  • 2,259
  • 1
  • 19
  • 25