Mobile Web implementation (with percent positioning)

HTML code:

<Divclass= "Wrap">  <DivID= "BG">    <DivID= "title">    <ahref="#"class= "return">Return</a>    </Div>    <ahref="#"class= "ios">iOS Downloads</a>    <ahref="#"class= "Android">Android download</a>  </Div></Div>

CSS code (RESET):

Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p, Blockquote,th,td,figure{padding:0;margin:0;}fieldset,img{Border:0;}: Focus{Outline:0;}Address,caption,cite,code,dfn,em,th,var,optgroup{Font-style:Normal;Font-weight:Normal;}H1,h2,h3,h4,h5,h6{font-size:100%;}abbr,acronym{Border:0;font-variant:Normal;}input,button,textarea,select,optgroup,option{font-family:Inherit;font-size:Inherit;Font-style:Inherit;Font-weight:Inherit;}Code,kbd,samp,tt{font-size:100%;}Body{Line-height:1.5;}Ol,ul,li{List-style:None;}Table{Border-collapse:collapse;border-spacing:0;}caption,th{text-align: Left;}sup,sub{font-size:100%;vertical-align:Baseline;}Blockquote,q{Quotes:None;}Blockquote:before,blockquote:after,q:before,q:after{content:"';content:None;}. Clear:after{Clear:both;content:'. ';Display:Block;Visibility:Hidden;Height:0;}. Clear{Zoom:1;Clear:both;}. Hide{Display:None;}Section,div,img,a{-webkit-tap-highlight-color:Rgba (0,0,0,0);-webkit-tap-highlight-color:Transparent;/*For some androids*/}input{-webkit-appearance:None;}

CSS code (Percent positioning):

. Wrap{position:relative;}#bg{background:URL (.. /images/bg.jpg) no-repeat Center Bottom;background-size:100%;}#title{width:100%;Height:7%;}a{text-indent:-9999px;Display:Block;}. Return{width:16%;Height:100%;float: Right;}. iOS{width:100%;Height:15%;Margin-top:93%;}. Android{width:100%;Height:15%;}

JS code (depending on the size of the device screen to determine the size of the background image display):

$(function(){            varSicwinfill =function(para) {varWin = $ (para.win| |window); varobj ={target: $ (para.target), Width:parseint (para.width)|| 0, Height:parseint (para.height)|| 0, Mode: (Para.mode|| "Contain"). toLowerCase (), onResize:para.onResize}; $ (window). Resize (function(){        varRatiow = Win.width ()/obj.width, Ratioh = Win.height ()/obj.height, Ratiomax =Math.max (Ratiow,ratioh), Ratiomin=math.min (Ratiow,ratioh), Ratiomain= Math.min (Ratiomin/parseint (0+obj.mode) *100, Ratiomax);varRatio = {              "Width": Ratiow,"Height": Ratioh,"Cover": Ratiomax,"Contain": Ratiomin} [Obj.mode]||Ratiomain; Obj.target.css ({width:parseint (ratio*obj.width), Height:parseint (ratio*obj.height)}); if(obj.onresize) obj.onresize ();    }). Resize ();} Sicwinfill ({target:"#bg", Width:640, Height:1074, Mode:"Width"    }); })