Determine viewport size with jQuery

Question

I am trying to determine the viewport size through jQuery. Unfortunately I do not get the results I am trying for.

First off my css:

.site {
    max-width: 960px;
}

@media only screen and (min-width : 760px) and (max-width : 1040px)  /* tablet */{
.site {
    max-width: 620px;
}

@media only screen and (min-width : 240px) and (max-width : 759px) /* mobile */{
.site {
    max-width: 285px;
}

Now I have been trying two different versions of determining the viewport size:

$(window).ready(function() {
    var viewport = $('.site').css("width");
});
$(function() {
    if ( viewport <= '285px' ) {
        console.log( "Mobile,", viewport ) ;}
    else if ( viewport <= '620px' ) {
        console.log( "Tablet,", viewport ) ;}
    else {
        console.log( "Desktop,", viewport ) };
});

This unfortunately always returns "Mobile, 285px", no matter what size ".site" is... It does not help changing ".css("width")" to ".css(width)" or ".width()" either.

The second version I have tried was:

$(window).ready(function() {
    var viewport = $(window).width();
});
$(function() {
    if ( viewport <= 759 ) {
        console.log( "Mobile,", viewport ) ;}
    else if ( viewport <= 1040 ) {
        console.log( "Tablet,", viewport ) ;}
    else {
        console.log( "Desktop,", viewport ) };
});

This will always return an error in the console:

Uncaught ReferenceError: viewport is not defined 
(anonymous function) 
j 
k.fireWith 
n.extend.ready 
I

It doesn't help changing "$(window)" to "$('.site')" either.

What am I doing wrong?

( For further explanation: My ultimate goal is resizing the negative margin I give to an off canvas navigation to better fit the screen width. And yes, I am at a mere beginners level with jQuery.)

Try changing $(window).ready(function() { to $(window).load(function() {. and declare var viewport outside load handler. — SSA, Sep 30 '14 at 14:30
Hm, so I tried this: `$(window).load(function() { }); var viewport = $('.site').css("width");` but it did not change the outcome... It still has the output as if it was mobile, no matter if it actually is... — Oliver Prenzel, Sep 30 '14 at 14:44
var viewport; $(window).load(function() {viewport = $(window).width();}); — SSA, Sep 30 '14 at 14:48
possible duplicate of [Using jQuery To Get Size of Viewport](http://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport) — Dexygen, Sep 30 '14 at 15:00
@GeorgeJempty I had a look at that, but it did not help me in solving my problem! — Oliver Prenzel, Sep 30 '14 at 15:47

David Jones · Accepted Answer · 2014-09-30T14:55:53.667

1

Try this:

$(window).ready(function() {
    var viewport = $(window).width();

    if ( viewport <= 759 ) {
        console.log( "Mobile,", viewport ) ;}
    else if ( viewport <= 1040 ) {
        console.log( "Tablet,", viewport ) ;}
    else {
        console.log( "Desktop,", viewport ) };
});

There is no need for the second function. You might as well do everything in your window ready block.

Here is a fiddle

NOTE: In the fiddle it will be getting the width of the result section so it will produce smaller results than the screen width. Make the result section wider to see the width value change.

edited Sep 30 '14 at 14:55

answered Sep 30 '14 at 14:50

David Jones

4,275
6
27
51

Thank you very much, this seems to answer my question and yield the appropriate results! – Oliver Prenzel Sep 30 '14 at 15:27

Determine viewport size with jQuery

1 Answers1