0

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.

  });
    });
Improve this question
1
  • if (screen.width > 768) ... Commented Aug 11, 2020 at 11:18

2 Answers 2

Reset to default
1

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
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

i got it working with this if($(window).width() >= 769 {
0

  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;
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.