Media query on javascript?

Question

I have the following snippet which I want to disable on tablets and mobiles.

if ( !! $('#sidebar').offset()) {    
        var stickyTop = $('#sidebar').offset().top;            
        $(window).scroll(function() {    
            var windowTop = $(window).scrollTop();    
            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });    
            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }

And I was thinking to wrap in inside a media query or something, like this:

if(@media (min-width:500px)){
if ( !! $('#sidebar').offset()) {

        var stickyTop = $('#sidebar').offset().top;


        $(window).scroll(function() {

            var windowTop = $(window).scrollTop();

            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });

            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }
}

But I'm sure that this wont work, so how would I stop this code from working on mobiles?

@ahren `var windowWidth = $(window).width(); if(windowsWidth > "800px"){functions here?}` — , Oct 19 '12 at 08:14

John Dvorak · Accepted Answer · 2012-10-19T08:16:36.043

2

The best solution might be is to style some element differently (even if it's margin:1px) for each media and then detect the computed style. This way, you can use any CSS media rule equally easily and you get full compatibility: CSS:

#widget{display:none}

@media screen{
  #widget{display:block}
}

JS:

if($("#widget").css("display")!="none){
   ...
}

Note that you should not query the media, but rather browser capabilities because the users of wide tablets (some even have keyboards) might still want to use your sidebar: if(document.width>600){...

edited Oct 19 '12 at 08:16

answered Oct 19 '12 at 08:08

John Dvorak

24,891
12
64
80

I'm not styling anything differently for mobiles, as it's a liquid layout and everything looks perfect, but I'll try the if condition :) – Oct 19 '12 at 08:15

Sirko · Answer 2 · 2012-10-19T08:18:38.307

1

You could use the matchMedia() function like this:

if ( window.matchMedia('(min-width:500px)') ) {
  // your code
}

Be cautious, however, as this function is not supported by all browsers!

Edit

A polyfill by Paul Irish can be found here.

edited Oct 19 '12 at 08:18

answered Oct 19 '12 at 08:06

Sirko

65,767
19
135
167

I could use it if the support would be greater, but as iOS 4.2.1 is not supporting it, and neither is android 2.3 and 2.2, this is not an option. – Oct 19 '12 at 08:11
@ChristianNikkanen You could use a polyfill for those browsers like [the one by Paul Irish](https://github.com/paulirish/matchMedia.js/). – Sirko Oct 19 '12 at 08:18
how about just `var windowWidth = $(window).width(); if(windowsWidth > "800px"){functions here?}`? – Oct 19 '12 at 08:20
@ChristianNikkanen This might work in most cases, but I think, you'll run into problems with resized browser windows and alike. – Sirko Oct 19 '12 at 08:26
@ChristianNikkanen `jQuery.width()` gets you the current width of the browser. So in case the user is resizing his browser, you might get false positive/negatives. So you will additionally have to put a handler to the `resize` event to account for that. You're not really getting the `min-width` of the user agent, but its current width! – Sirko Oct 19 '12 at 08:33
But when it's used with `$(document).ready()`, it only runs once, right? – Oct 19 '12 at 08:41
@ChristianNikkanen It runs just once, correct. So when the browser is set to very small dimensions at that point, you might mistake it for a mobile device. – Sirko Oct 19 '12 at 08:44
It doesn't matter at that point, I'll just assume that user is browsing on normal dimensions. – Oct 19 '12 at 13:03

score 0 · Answer 3 · answered Oct 19 '12 at 08:06

0

if( $(window).width() > 499 ) {
   // Code here
}

answered Oct 19 '12 at 08:06

kayen

4,554
3
17
20

score 0 · Answer 4 · answered Oct 19 '12 at 08:10

0

Idk if this is the best way, but:

<style type="text/css" media="screen">
body:after 
{
    content:url("javascript:(function(){document.getElementsByTagName('p')[0].innerHTML=' ';})()");
}
</style>

That is - using pseudoelements to add you particular javscript after body tag.

Another way is to assign different style to body tag or some special hidden field for different media and then detect this style from jQuery or ordinary javascript.

Checking window width is not the preferred method! The borders between ordinary screen devices and handhelds are gradually dimnishing.

answered Oct 19 '12 at 08:10

Artur Udod

3,968
23
53

I'd rather stay away from hacks. – Oct 19 '12 at 08:12
Well, it's not that much a hack. You can just use some global variable, like 'deviceType' or something and then just assign this variable a value in the body:after preudoelement. All other .js code will just check this variable. – Artur Udod Oct 19 '12 at 08:16
If that's not a hack, then there's no hacks. – Oct 19 '12 at 08:21
Well, ok, you're right =) but then - setting different value to display css property and then checking is also a hack. I don't see ansers here that are 1) not a hack 2) do not simply check screen size – Artur Udod Oct 19 '12 at 08:50

score 0 · Answer 5 · edited May 23 '17 at 11:50

0

Window width detection is a bit flaky at best: tablets are mobile devices more often than not feature big screens > 500px. I suggest you try userAgent sniffing , or the scripts at detectmobilebrowsers.com/. Another option is to use modernizr to check for touch-enabled devices

edited May 23 '17 at 11:50

Community

1
1

answered Oct 19 '12 at 08:11

c_kick

1,408
10
17

score 0 · Answer 6 · answered Oct 19 '12 at 08:15

0

You could use matchMedia as @Sirko very well pointed out and in order to have compatibility with older browsers you could use this matchMedia polyfill like so:

if (matchMedia('(min-width:500px)').matches) {
    // do your stuff
}

answered Oct 19 '12 at 08:15

Bogdan

38,174
9
114
120

Media query on javascript?

6 Answers6