How can I use JavaScript/JQuery to resize the HTML of my page responsively? -

click here view example.

i attempting use code in simple website responsively resize html of page, resize window.

is not possible or making simple error? website designed 1360x768 (my resolution), code makes extremely wonky, , no scroll-bar shown (unsure why).

the code resize/scale:

function scalepage(){     document.getelementsbytagname("*").each(function(){         var width  = ($(this).width() ) / 1360;         var height = ($(this).height()) / 768;         $(this).css("transform", "scale("+width+","+height+")");         $(this).css("-moz-transform", "scale("+width+","+height+")");          $(this).css("-webkit-transform", "scale("+width+","+height+")");         $(this).css("-o-transform", "scale("+width+","+height+")");     }); }  $(document).ready(function() {     scalepage(); }); $(window).resize(function() {     scalepage(); }); 

resizing page using js bad idea go.

here's why:

• what if user has js disabled?
• what if user has older browser can't render js quick enough?
• each time resize browser content must re-rendered.
• javascript should used add features site, not create them.

secondly,

this approach not 'responsive'. achieve responsive layout on site should use css control it, faster javascipt/ jquery.

a starting point creating responsive web pages article: 2014 guide responsive web design. seasoned front-end web developer tell key responsive website develop mobile first. ensure site 'scale' nicely.

thirdly,

i going re-iterate point javascript being used add functionality, more , more see sites failing when have javascript disabled or browse on older laptop ie8 installed. (although there arguments against supporting ie8 nowadays.)