Cross-browser @media (width) and @media (height) values

Cross-browser @media (width) and @media (height) values 

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth and .innerHeight

  • gets CSS viewport @media (width) and @media (height) which include scrollbars
  • initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
  • zoom may cause values to be 1px off due to native rounding
  • undefined in IE8-

document.documentElement.clientWidth and .clientHeight

  • equals CSS viewport width minus scrollbar width
  • matches @media (width) and @media (height) when there is no scrollbar
  • same as jQuery(window).width() which jQuery calls the browser viewport
  • available cross-browser

Resources

Set the same boxes height on page

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);