android - iPhone not displaying top of web page when viewed on a smartphone -
i have been developing reactive design web page. when viewed on desk top whole page displays (with browser window shrunk down phone size), when viewed iphone (and same on android) top 100'ish pixels off top of page. has come across issue?
my code , css below:
<link rel="stylesheet" type="text/css" href="tin_mouse_size.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <script type="text/javascript"> <!-- function mm_swapimgrestore() { //v3.0 var i,x,a=document.mm_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.osrc;i++) x.src=x.osrc; } function mm_preloadimages() { //v3.0 var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++) if (a[i].indexof("#")!=0){ d.mm_p[j]=new image; d.mm_p[j++].src=a[i];}} } function mm_findobj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); if(!x && d.getelementbyid) x=d.getelementbyid(n); return x; } function mm_swapimage() { //v3.0 var i,j=0,x,a=mm_swapimage.arguments; document.mm_sr=new array; for(i=0;i<(a.length-2);i+=3) if ((x=mm_findobj(a[i]))!=null){document.mm_sr[j++]=x; if(!x.osrc) x.osrc=x.src; x.src=a[i+2];} } function mm_swapimgrestore() { //v3.0 var i,x,a=document.mm_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.osrc;i++) x.src=x.osrc; } function mm_preloadimages() { //v3.0 var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++) if (a[i].indexof("#")!=0){ d.mm_p[j]=new image; d.mm_p[j++].src=a[i];}} } function mm_findobj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); if(!x && d.getelementbyid) x=d.getelementbyid(n); return x; } function mm_swapimage() { //v3.0 var i,j=0,x,a=mm_swapimage.arguments; document.mm_sr=new array; for(i=0;i<(a.length-2);i+=3) if ((x=mm_findobj(a[i]))!=null){document.mm_sr[j++]=x; if(!x.osrc) x.osrc=x.src; x.src=a[i+2];} } //--> // when ready... window.addeventlistener("load",function() { // set timeout... settimeout(function(){ // hide address bar! window.scrollto(0, 1); }, 0); }); </script> </head> <body> <body onload="mm_preloadimages('images/roll_overs_home_on.png','images/roll_overs_me_on.png','images/roll_overs_work_on.png','images/roll_overs_contact_on.png')"> <div id="centeredcontent"> <div id="blank"></div> <div id="home"> <a href="http://www.google.co.uk" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('image1','','images/roll_overs_home_on.png',1)"><img src="images/roll_overs_home_off.png" alt="home" name="image1" width="100%" height="100%" border="0" id="image1" /></a> </div> <div id="me"> <a href="http://www.google.co.uk" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('image2','','images/roll_overs_me_on.png',1)"><img src="images/roll_overs_me_off.png" alt="me" name="image2" width="100%" height="100%" border="0" id="image2" /></a> </div> <div id="work"> <a href="http://www.google.co.uk" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('image3','','images/roll_overs_work_on.png',1)"><img src="images/roll_overs_work_off.png" alt="work" name="image3" width="100%" height="100%" border="0" id="image3" /></a> </div> <div id="contact"> <a href="http://www.google.co.uk" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('image4','','images/roll_overs_contact_on.png',1)"><img src="images/roll_overs_contact_off.png" alt="contact" name="image4" width="100%" height="100%" border="0" id="image4" /></a> </div> <div class="contact_holder_div"> <div class="designed_in_cornwall"><a href="mailto:info@dandcauctions.co.uk" title="email us" class="designed_in_cornwall_button"></a></div> <div class="email"><a title='click me , send email' href="#" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('email','','images/mail-square.png',1)"><img src="images/mail.png" alt="email" name="email" width="100%" height="100%" border="0" id="email" /></a></div> <div class="gtalk"><a href="#" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('google talk','','images/gtalk-square.png',1)"><img src="images/gtalk.png" alt="google talk" title="google talk" name="google talk" width="100%" height="100%" border="0" id="google talk" /></a></div> <div class="linkedin"><a href="#" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('linkedin','','images/linkedin-logo-square.png',1)"><img src="images/linkedin-logo.png" alt="linkedin" title="linkedin" name="linkedin" width="100%" height="100%" border="0" id="linkedin" /></a></div> <div class="twitter"><a href="#" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('twitter','','images/twitter-square.png',1)"><img src="images/twitter.png" alt="twitter" name="twitter" title="twitter" width="100%" height="100%" border="0" id="twitter" /></a></div> <div class="flickr"><a href="#" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('flickr','','images/flickr-square.png',1)"><img src="images/flickr.png" alt="flickr" title="flickr" name="flickr" width="100%" height="100%" border="0" id="flickr" /></a></div> </div> </div> </body> </html> my css:
/* defaults / desktop view */ html, body { height: 100%; } #centeredcontent { width: 480px; height: 640px; text-align: center; border: 1px solid #000; background-color: white; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -240px; margin-top: -320px; } h1 { color: #000000; } h2 { color: #000000; } h3 { color: #000000; } h4 { color: #000000; } @media screen , (min-width:980px ) , (max-width:2880px) { /*large desktop*/ #centeredcontent { width: 800px; height: 800px; text-align: center; border: 1px solid #000; background-color: white; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -320px; } #blank { width: 1px; height: 1px; text-align: center; border: 0px solid #000; background-color:#fff position: absolute; left: 0px; top: 0px; } #home { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 84px; top: 0px; } #me { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 242px; top: 0px; } #work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 400px; top: 0px; } #contact { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 558px; top: 0px; } #home-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 84px; top: 0px; } #me-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 242px; top: 0px; } #work-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 400px; top: 0px; } #contact-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 558px; top: 0px; } div#box { width: 500px; height: 500px; position: absolute; left: 150px; top: 160px;} #thumbbox{ /*outermost div thumbnail viewer*/ position: absolute; left: 0; top: 0; width: auto; padding: 10px 10px 20px 10px; border: 1px solid #f8f8f8; -moz-box-shadow: 5px 5px 10px #000000; -webkit-box-shadow: 5px 5px 10px #000000; box-shadow: 5px 5px 10px #000000; background: #ffffff; visibility: hidden; z-index: 10; cursor: hand; cursor: pointer; } #thumbbox .footerbar{ /*footer div of thumbbox contains "close" link */ font: bold 16px tahoma; letter-spacing: 5px; line-height: 1.1em; color: black; padding: 5px 0; text-align: right; } #thumbloading{ /*div showing "loading" status while thumbbox being generated*/ position: absolute; visibility: hidden; border: 1px solid black; background-color: #efefef; padding: 5px; z-index: 5; } } @media screen , (min-width:651px ) , (max-width:979px) { /*small desktop / large tablet view*/ #centeredcontent { width: 650px; height: 640px; text-align: center; border: 1px solid #000; background-color: white; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -325px; margin-top: -320px; } #blank { width: 1px; height: 1px; text-align: center; border: 0px solid #000; background-color:#fff position: absolute; left: 0px; top: 0px; } #home { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 9px; top: 0px; } #me { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 167px; top: 0px; } #work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 325px; top: 0px; } #contact { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 483px; top: 0px; } #home-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 9px; top: 0px; } #me-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 167px; top: 0px; } #work-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 325px; top: 0px; } #contact-work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 483px; top: 0px; } div#box { width: 500px; height: 500px; position: absolute; left: 75px; top: 160px;} #thumbbox{ /*outermost div thumbnail viewer*/ position: absolute; left: 0; top: 0; width: auto; padding: 10px 10px 20px 10px; border: 1px solid #f8f8f8; -moz-box-shadow: 5px 5px 10px #000000; -webkit-box-shadow: 5px 5px 10px #000000; box-shadow: 5px 5px 10px #000000; background: #ffffff; visibility: hidden; z-index: 10; cursor: hand; cursor: pointer; } #thumbbox .footerbar{ /*footer div of thumbbox contains "close" link */ font: bold 16px tahoma; letter-spacing: 5px; line-height: 1.1em; color: black; padding: 5px 0; text-align: right; } #thumbloading{ /*div showing "loading" status while thumbbox being generated*/ position: absolute; visibility: hidden; border: 1px solid black; background-color: #efefef; padding: 5px; z-index: 5; } } @media screen , (min-width:480px ) , (max-width:650px) { /* small tablet view */ #centeredcontent { width: 480px; height: 640px; text-align: center; border: 1px solid #000; background-color: white; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -240px; margin-top: -320px; } #blank { width: 1px; height: 1px; text-align: center; border: 0px solid #000; background-color:#fff position: absolute; left: 0px; top: 0px; } #home { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 82px; top: 0px; } #me { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 240px; top: 0px; } #work { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 82px; top: 158px; } #contact { width: 158px; height: 158px; text-align: center; border: 1px solid #000; position: absolute; left: 240px; top: 158px; } #home-work { width: 120px; height: 120px; text-align: center; border: 1px solid #000; position: absolute; left: 0px; top: 0px; } #me-work { width: 120px; height: 120px; text-align: center; border: 1px solid #000; position: absolute; left: 120px; top: 0px; } #work-work { width: 120px; height: 120px; text-align: center; border: 1px solid #000; position: absolute; left: 240px; top: 0px; } #contact-work { width: 120px; height: 120px; text-align: center; border: 1px solid #000; position: absolute; left: 360px; top: 0px; } div#box { width: 480px; height: 480px; position: absolute; left: 0px; top: 130px;} #thumbbox{ /*outermost div thumbnail viewer*/ position: absolute; left: 0; top: 0; width: auto; padding: 10px 10px 20px 10px; border: 1px solid #f8f8f8; -moz-box-shadow: 5px 5px 10px #000000; -webkit-box-shadow: 5px 5px 10px #000000; box-shadow: 5px 5px 10px #000000; background: #ffffff; visibility: hidden; z-index: 10; cursor: hand; cursor: pointer; } #thumbbox .footerbar{ /*footer div of thumbbox contains "close" link */ font: bold 16px tahoma; letter-spacing: 5px; line-height: 1.1em; color: black; padding: 5px 0; text-align: right; } #thumbloading{ /*div showing "loading" status while thumbbox being generated*/ position: absolute; visibility: hidden; border: 1px solid black; background-color: #efefef; padding: 5px; z-index: 5; } } @media screen , (max-width:479px) { /* smartphone view*/ #centeredcontent { width: 320px; height: 640px; text-align: center; border: 1px solid #000; background-color: white; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -160px; margin-top: -320px; } #blank { width: 1px; height: 1px; text-align: center; border: 0px solid #000; background-color:#fff position: absolute; left: 0px; top: 0px; } #home { width: 140px; height: 140px; text-align: center; border: 1px solid #000; position: absolute; left: 90px; top: 20px; } #me { width: 140px; height: 140px; text-align: center; border: 1px solid #000; position: absolute; left: 90px; top: 160px; } #work { width: 140px; height: 140px; text-align: center; border: 1px solid #000; position: absolute; left: 90px; top: 300px; } #contact { width: 140px; height: 140px; text-align: center; border: 1px solid #000; position: absolute; left: 90px; top: 440px; } #home-work { width: 80px; height: 80px; text-align: center; border: 1px solid #000; position: absolute; left: 0px; top: 0px; } #me-work { width: 80px; height: 80px; text-align: center; border: 1px solid #000; position: absolute; left: 80px; top: 0px; } #work-work { width: 80px; height: 80px; text-align: center; border: 1px solid #000; position: absolute; left: 160px; top: 0px; } #contact-work { width: 80px; height: 80px; text-align: center; border: 1px solid #000; position: absolute; left: 240px; top: 0px; } }
your problem here (clipped relevant parts):
#centeredcontent { height: 640px; position: absolute; top: 50%; margin-top: -320px; } iphone screens historically 320x480 pixels. when retina screens introduced iphone 4, doubled both ways 640x960, prevent making sites unreadable small if specify pixel sizes, old resolutions maintained , content blown up. hence iphone 4/4s still considers 320x480 browser. android browsers have since done same high resolution screens.
on 480 pixels high iphone screen, positioning content @ 240 pixels down (top:50%) , 320 pixels (margin-top:-320px). hence you're moving content 80 pixels beyond top edge of browser, maybe tad more due address bar taking space too.
bottom line: don't vertically center content, it's bad idea without ensuring fit. final media query small screens should not attempt center let smartphone browser scaling job.
Comments
Post a Comment