Geek Answers Handbook

IPhone / iPad / webkit browser rendering size

I have an html snippet below that renders perfectly in all browsers. However, in the webkit on the iphone and ipad, when I pinch the page (so that it is smaller), I see a black border, which is the background color of the body, shining only on the right edge. This only happens when I specify the width of the div.headerpic. Since this is the only place in the document, I indicate the width, I wondered why it stops doing everything possible to the right (since this is theoretically the widest part of the document?).

I have attached a photo of what it looks like on my ipad.

<!doctype html> <html> <head> <style> body {background-color:#000;color:#231f20;margin:0;} #wrapper {background-color:#fff;min-height:1000px;} #header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;} #footer {color:#fff;} </style> </head> <body> <div id="wrapper"> <div id="header"> <div class="headerpic"> </div> </div> </div> <div id="footer"> </div> </body> </html>

Photo of problem

+6
html css iphone ipad webkit
source share
5 answers

This will illustrate your problem a bit: http://jsbin.com/ilenu5/5

What I've done:

  • I Increased #headerpic width to 1286px
  • I added #headerpic background color which is red

So your actual problem: overflow has occurred

Why? because you do not set viewport ( width=device-width ) and the minimum physical width (in px or cm or em) body , so your default body width is 980px and inherited #wrapper - so your 986px #headerpic overflows #wrapper and does your black background. Since the width of the crowded area is small (986-980 = 6px), you see a black line.

+2
source share

In my case, using:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Instead:

 <meta name="viewport" content="width=device-width">

Did the trick!

+8
source share

Doing #wrapper position:absolute fixes the problem.

+1
source share

In my case, this is:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

AND:

 html, body {min-width:980px; overflow-x: hidden;}

Fixes a problem.

0
source share

Application

overflow-x:hidden;

in one of my divs did it

Give credit to @starkadh for inspiration.

0
source share

More articles:


All Articles