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.)


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more