Window.width() for browser size?

Question

I have the following JQuery function:

<script>
    $(document).ready(function(){
        var current_width = $(window).width();
        if(current_width => 1920){
            $("#body").css({    
                -moz-transform: 'scale(1, 1)', 
                zoom: '1',  
                zoom: '100%' 
            });
        }
        else if(1366 < current_width < 1920){
            $("#body").css({    
                -moz-transform: 'scale(0.85, 0.85)',
                zoom: '0.85', 
                zoom: '85%', 
            });
        }
       else if(current_width <= 1366){
            $("#body").css({    
                -moz-transform: 'scale(0.7, 0.7)',
                zoom: '0.7', 
                zoom: '70%' 
            });
       }

    });
</script>

I use a Chrome window resize extension to test different screen sizes, but when using the window.width JQuery function, despite the browser being resized, it's still detecting my native 1920px width. Is there something wrong with my code or I do really need to test different screen sizes using another devices when using the window.width() function?

Thank you

For starters, your code isn't valid. [Try testing it here](http://esprima.org/demo/validate.html) and you'll see all of the syntax errors. — Mike Cluck, Jul 02 '15 at 17:40
possible duplicate of [Cross-browser window resize event - JavaScript / jQuery](http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery) — , Jul 02 '15 at 17:41
You may want to look into CSS stylesheets and @media queries. — Heretic Monkey, Jul 02 '15 at 17:41
For testing less than and greater than in _JavaScript_ you have to write it in two steps using a _logical AND `&&`_ to join them `small < x && x < big`. The way you've done it will be evaluated as follows, `small < x < big` becomes `bool < big` which will usually be `true` if `big > 1` — Paul S., Jul 02 '15 at 17:47
Thank you for the suggestions! @TinyGiant, that thread does not quite meet my question, at least it did not really help me out. Else, I would have posted there. — Doge, Jul 02 '15 at 18:00

Tushar · Accepted Answer · 2015-07-02T17:51:43.047

Wrap your code in resize event handler. See the changes highlighted in the code below.

$(window).on('load resize rotate', function() {
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    var current_width = $(window).width();
    if (current_width >= 1920) {
        //            ^^

        $("#body").css({
            '-moz-transform': 'scale(1, 1)',
            // zoom: '1', Don't need
            zoom: '100%'
        });
    } else if (current_width > 1366 && current_width < 1920) {
        //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

        $("#body").css({
            '-moz-transform': 'scale(0.85, 0.85)',
            // zoom: '0.85', // Not needed
            zoom: '85%',
        });
    } else if (current_width <= 1366) {
        $("#body").css({
            '-moz-transform': 'scale(0.7, 0.7)',
            // zoom: '0.7', // Not needed
            zoom: '70%'
        });
    }
});

`-moz - transform` cannot be used as a key without quoting it, as it will throw `SyntaxError: Unexpected token -` — Paul S., Jul 02 '15 at 17:51
Thank you for the syntax corrections! However, it's still not zooming out when loading the page on a 1366px wide device (or 1600px resized-browser) — Doge, Jul 02 '15 at 17:59

Window.width() for browser size?

1 Answers1