CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
user3660857
user3660857

Reputation: 325

Getting pixel value of browser width for responsive design

I've been reading a lot on responsive design recently and trying to understand the best practices. What I see getting mentioned is content driven breakpoints rather than device specific.

What would be really helpful is getting the exact width in pixels of your browser when re-sizing it to get specific values. I went onto chrome extensions an added the "Browser Width" extension which seemed exactly what I needed. However after some testing the value "Browser width" gives is about 20px wider.

Is there anything else I can use to get what I'm looking for??

Upvotes: 2

Views: 1918

Answers (3)

LocalPCGuy
LocalPCGuy

Reputation: 6116

You should be using window.matchMedia to determine which media query range the browser is currently in for responsive design. That way you avoid the scroll bar issue pretty much altogether. You could potentially use something like the following:

var mqMatcher = (function () {
    var siteMediaQueries = {
        mobile: 'only screen and (max-width : 767px)',
        tablet: 'only screen and (min-width : 768px) and (max-width : 1199px)',
        desktop: 'only screen and (min-width : 1200px)'
    };
    var w = window;

    // which mediaQuery does it match, will use the default or an object of mediaQueries passed in
    function getMatches(smq) {
        if (!smq || Object.keys(smq).length === 0) {
            smq = siteMediaQueries;
        }
        for (var size in smq) {
            if (w.matchMedia(smq[size]).matches) {
                return size;
            }
        }

        return false;
    }

    // is the browser (based on mediaQuery) in the passed in min/max widths
    function matchSize(min, max) {
        var mq = 'only screen and (min-width : ' + min + 'px) and (max-width : ' + max + 'px)';

        return w.matchMedia(mq).matches;
    }

    return {
        getMatches: getMatches,
        matchSize: matchSize
    };
})();

// usage:
// mqMatcher.getMatches()
// > desktop
// 
// On a mobile screen @ 320
// mqMatcher.matchSize(0,768)
// > true
// 
// On a desktop screen @ 1920
// // mqMatcher.matchSize(0,768)
// > false

Upvotes: 0

ProblemSolver
ProblemSolver

Reputation: 644

Below JS will suffice:

                function jsUpdateSize(){
                    // Get the dimensions of the viewport
                    var width = window.innerWidth ||
                                document.documentElement.clientWidth ||
                                document.body.clientWidth;
                    var height = window.innerHeight ||
                                 document.documentElement.clientHeight ||
                                 document.body.clientHeight;

                    document.getElementById('jsWidth').innerHTML = width;  // Display the width
                    document.getElementById('jsHeight').innerHTML = height;// Display the height
                };
                window.onload = jsUpdateSize;       // When the page first loads
                window.onresize = jsUpdateSize;

Once you know the diffrence you can substract that from the obtained value.

Below will do for JQuery:

                function jqUpdateSize(){
                // Get the dimensions of the viewport
                var width = $(window).width();
                var height = $(window).height();

                $('#jqWidth').html(width);      // Display the width
                $('#jqHeight').html(height);    // Display the height
            };
            $(document).ready(jqUpdateSize);    // When the page first loads
            $(window).resize(jqUpdateSize);     // When the browser changes size

Upvotes: 1

Jay Dansand
Jay Dansand

Reputation: 779

The width is reported as around 20px wider due to the scrollbar (which varies by OS/browser/other factors).

From a DOM-inspection/JavaScript standpoint

The best bet would be to look at the width of the <body> element in developer tools (Chrome, Firefox), although that isn't very reliable. The width returned by JavaScript doesn't always match the CSS width for a breakpoint, either. There are many properties to look at (although by the spec, it should be window.innerWidth, but it isn't always). Here's a function that generally returns widths closely matching the CSS breakpoint width, with some of my own notes from different browser tests (admittedly only as recently as IE 9/Chrome 16, so YMMV):

function winDimensions() {
var w = false, h = false, d = document.documentElement;
//IE 9:         CSS width: 752, Window.innerWidth: 752, HTML.clientWidth: 735, HTML.offsetWidth: 752, body.clientWidth: 735, body.offsetWidth: 735 
//  Correct: Window.innerWidth, HTML.offsetWidth
//IE 8 (via 9): CSS width: 752, Window.innerWidth: 752, HTML.clientWidth: 735, HTML.offsetWidth: 752, body.clientWidth: 735, body.offsetWidth: 735 
//  Correct: Window.innerWidth, HTML.offsetWidth
//IE 7 (via 9): CSS width: 752, Window.innerWidth: 752, HTML.clientWidth: 735, HTML.offsetWidth: 752, body.clientWidth: 735, body.offsetWidth: 735
//  Correct: Window.innerWidth, HTML.offsetWidth
//FF 10:        CSS width: 752, Window.innerWidth: 752, HTML.clientWidth: 735, HTML.offsetWidth: 735, body.clientWidth: 735, body.offsetWidth: 735
//  Correct: Window.innerWidth
//Chrome 16:    CSS width: 752, Window.innerWidth: 769, HTML.clientWidth: 752, HTML.offsetWidth: 752, body.clientWidth: 752, body.offsetWidth: 752
//  Correct: HTML.clientWidth, HTML.offsetWidth, body.clientWidth, body.offsetWidth
//Safari 5:     CSS width: 752, Window.innerWidth: 769, HTML.clientWidth: 752, HTML.offsetWidth: 752, body.clientWidth: 752, body.offsetWidth: 752
//  Correct: HTML.clientWidth, HTML.offsetWidth, body.clientWidth, body.offsetWidth
//Opera 11:     CSS width: 752, Window.innerWidth: 752, HTML.clientWidth: 735, HTML.offsetWidth: 735, body.clientWidth: 735, body.offsetWidth: 735
//  Correct: Window.innerWidth
//Overall winner: Window.innerWidth, followed by HTML.offsetWidth
if ((d && d.clientWidth) || ((d = d.body) && d.clientWidth)) { w = d.clientWidth; h = d.clientHeight; }
if (((d = document.documentElement) && d.offsetWidth) || ((d = d.body) && d.offsetWidth)) { w = d.offsetWidth; h = d.offsetHeight; }
if ((d = window) && d.innerWidth) { w = d.innerWidth; h = d.innerHeight; }
return { width: w, height: h};
}

The real solution

To get around the JavaScript limitation (and uncertain scrollbar widths): use Firefox or Chrome's mobile device emulation (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View or https://developer.chrome.com/devtools/docs/device-mode). That will take the scrollbars out (as they are in mobile browsers) and allow you to drag the viewport size and see it reported accurately.

Upvotes: 0

Related Questions