Calcular el tamaño (ancho y alto) del navegador automáticamente con jQuery

Calcular el tamaño (ancho y alto) del navegador automáticamente con jQuery

/**
 * Resize
 */
jQuery(document).ready(function($) {
    redimencionar();
    $(window).resize(redimencionar);
});
function redimencionar() {
    jQuery(document).ready(function($) {
        var height = $(window).height();
        var width = $(window).width();
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    });
}
/**
 * End Resize
 */

//Redimensionamiento otro modo y más corto ;)
jQuery(document).ready(function($) {
    $(window).bind("load resize", function() {
        $('body').append('<div class="wmb" style="width: 150px;height: 150px;border: 1px solid green;color: green;font-family: Arial;font-size: 14px;position: fixed;left: 1px;top: 1px;z-index: 99999;"></div>');
        var height = $(window).height();
        var width = $(window).width();
        $('.wmb').html('Screen: ' + width + ' x ' + height);
    })
})

CSS medidas para diseño web adaptativo

CSS, sugerencia de medidas y notas para diseño web adaptativo (Responsive Design).

Medidas

960px
768px
480px
320px
200px

 

/************************* Base ******************************/
/************************* Ejemplo. 960px ******************************/
/*style.css*/

/************************* Responsive Design ******************************/
/************************* 960px - 1200px ******************************/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    
}

/************************* 768px - 960px ******************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    
}

/************************* 480px - 768px ******************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    
}

/************************* 320px - 480px ******************************/
@media only screen and (min-width: 320px) and (max-width: 479px) {
    
}

/************************* 200px - 320px ******************************/
@media only screen and (min-width: 0px) and (max-width: 319px) {
    
} 

Icono

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="/img/WMB_57x57.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="/img/WMB_72x72.png" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="/img/WMB_114x114.png" />
<!-- No such device exists yet, so if this value is used, it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="/img/WMB_228x228.png" />