More Information.

jQuery Code for Sizing and Layout Based on Window Width


$(document).ready(function() {

var isMobile3 = false;

if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { isMobile3 = true;

} windowchange3();

$(window).bind("load", windowchange3);
$(window).bind("resize", windowchange3);
$(window).bind("orientationchange", windowchange3);

function windowchange3() {

current_height = window.innerHeight;
current_width = window.innerWidth;

if(current_width){

if(current_width>600 && isMobile3 == false){

$('#mystars').css({'display':'inline-block'});
$('#logo').css({'font-size':current_width/30+'px'})

} else{

$('#mystars').css({'display':'inline-block'});
$('#logo').css({'font-size':current_width/30+'px'})

}

else{

window.setTimeout(windowchange, 30);

}

}

})




Responsive Element Size/Visibility



This block of code creates a variable containing the viewable width of the browser window in pixels and allows elements to be sized as a percentage of that width. It also allows elements to be displayed or hidden depending on the window width. This block of code helps a lot for cross device web pages and is what I use to adjust pages for mobile hone users.