javascript - CSS scale and translate issues. How do they do it properly? -

javascript - CSS scale and translate issues. How do they do it properly? -

this mobile browser related, not desktop. i'm trying create div maintain dimensions relative device screen. when user zoom in/out, div , content (image) remain same, nor blurry, not pixelated. it's hard xbrowser. thought there saw on iphone 5s , every time used method, came out blurry.

i wish did on website. please seek on mobile , wait footer splash appear. made well, no matter device have, splash in footer remains same. please help me on establishing similar splash behavior? close give :(

here's tried far. bit of code , pseudo code:

i current viewport width , height i scalew , scaleh dividing vpwidth , vpheight screen.availwidht , screen.acailheight accordingly. i have problem on choosing scale set in css if it's portrait, utilize scalew or else, scaleh (is method?). i calculate left , top of element in way: left = (vpwidth-width*scale)/2; top = (vpheight-height*scale)/2; width , height div's width , height i calculate 'translate' this: translate = -((1 - scale) / 2) * 100; saw in website talked , frankly, makes sense. i apply code div style: -webkit-transform:translate(<%= translate + '%' + ',' + translate + '%' %>) scale(<%= scale %>) translatez(0px); , of course of study add together left , top properties. i'm pretty novice in css :( larn code , examples. not novice in coding @ all.

javascript css transform scaling