CODEWITHSUNDEEP
javascriptjquery
gjjr
gjjr

Reputation: 569

disable jquery/js on mobile

how can i disable the following piece of code on mobile (<768px)?

jQuery(document).ready(function() {
jQuery('.fullpage-wrapper').tilt({
  maxTilt:        12,
perspective:    2500,   // Transform perspective, the lower the more extreme the tilt gets.
easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
scale:          1.1,      // 2 = 200%, 1.5 = 150%, etc..
speed:          2000,    // Speed of the enter/exit transition.
transition:     false,   // Set a transition on enter/exit.
reset:          false,   // If the tilt effect has to be reset on exit.
glare:          true,  // Enables glare effect
maxGlare:       0.1   // From 0 - 1.

  });
    });

Upvotes: 0

Views: 54

Answers (2)

Mitja Gustin
Mitja Gustin

Reputation: 1791

  1. Read dimensions of a screen via javascript.

    var w = window.innerWidth; // always returns pixels var h = window.innerHeight; // always returns pixels

  2. Then put the function call jQuery('.fullpage-wrapper').tilt inside if statement

    if (w >= 768){ jQuery('.fullpage-wrapper').tilt({ .... etc }

NOTE: Check which method for gettings dimensions works well on your target device(s). perhaps this could work better:

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;

Upvotes: 0

Simon
Simon

Reputation: 2996

Checkout window.matchMedia which can be used to check whenever a given media query string matches the current viewport.

In your case I'd be

if (window.matchMedia('(max-width: 768px)')) {
    // Code to be executed if the viewport size is below 768px
}

Upvotes: 1

Related Questions