Using javascript to set breakpoints

Question

I am at the moment using a bit of javascript to modify the Meta viewport tag. Right now it's doing a simple detection of the userAgent, however I'd like to do it based on screen width size (breakpoints) to better target all mobile devices, etc. How would I go about this? Sample code below!

    <meta id="viewport" name='viewport'>
    <script>
        (function(doc) {
            var viewport = document.getElementById('viewport');
            if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
                viewport.setAttribute("content", "initial-scale=1.0");
            } else if ( navigator.userAgent.match(/iPad/i) ) {
                viewport.setAttribute("content", "initial-scale=0.65");
            }
        }(document));
    </script>

*"I am at the moment using a bit of javascript to modify the Meta viewport tag."* That almost certainly won't work. Perhaps if you *output* it in one form or the other with the dreaded `document.write`, but I doubt changing it after-the-fact with JavaScript will have the desired result reliably cross-browser (if at all). — T.J. Crowder, Oct 03 '16 at 16:51
So basically, you want to know how to detect the screen size in JavaScript? If so, this is a duplicate of [*How to detect screen size for responsive web design?*](http://stackoverflow.com/questions/31162606/how-to-detect-screen-size-for-responsive-web-design) — T.J. Crowder, Oct 03 '16 at 16:52

score 0 · Answer 1 · edited Oct 03 '16 at 17:18

0

You can use:

if($.mobile.media("screen")){
   $('meta[name=viewport]').attr('content','Your stuffs');
}

Note:

You need to add the jQuery Mobile library
For the if clause u can set max-device-width

edited Oct 03 '16 at 17:18

gitsitgo

6,589
3
33
45

answered Oct 03 '16 at 17:12

Lego

15
2

Using javascript to set breakpoints

1 Answers1