iPad background for div blocks not spanning entire width of screen

Question

I've had a continued problem with div blocks stretching along the entire width of my iPad's screen. It seems to stop about 20 pixels from the right side of the screen.

Screenshots:

For the menu, I've got a div block and a UL inside for the menu itself. UL's width is set to 1000px and the background div block is set to width:100%; Width of this background is exactly 1009px.

The footer is a div block with the background, and two floated div blocks. Width of the background for this is exactly 1004px.

I've had this problem on other websites, specifically in this area. Anyone have any idea?

Solution 1

You're seeing the problem on the iPad because its default viewport is 980 pixels (see Apple's docs ). So the effect you're seeing is the same as if you shrink your desktop browser to less than 1000 pixels, and scroll to the right (it does the same thing).

You'll notice the size of the gap changes depending on the width of the browser window. This is because when you're setting width:100% to your wrapper divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, or the iPad's viewport. You're not telling them to resize to the content within.

@sandeep's solution is the correct one, and how you've implemented it works fine for me in Safari but not in any browser other I try it in. Are you user agent sniffing to serve the code to only Safari? If so, there's no need, you can just apply the min-width:1024px, or even just min-width:1000px to your body tag, or .footerbg however you normally apply CSS.

Solution 2

I had a look at your website, the problem is not only on the iPad but also on the PC version because when the horizontal scroller is on PC then the page behaves the same as it does on iPad version. Check yourself.

Solution: Just write the following in your body:

body{
 min-width:1024px;
}

Solution 3

this works

<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">

Solution 4

The iPad-Screen width, when talking landscape mode, is 1024 pixel, not 1004.

Solution 5

You got the width size incorrect. But no need to worry. You just need to have 1024 instead of 1004.

Hope this helps!

View more solutions

Comments

[Don Wilson]

I added it at the bottom of the website's code and it doesn't fix it at all.

[Don Wilson]

I think this is fairly ipad/iphone specific

[Don Wilson]

div block is set to width:100%; Both top and bottom divs have widths set to 100%, however they render to those pixel widths given.

[sandeep]

please define <meta name="viewport" content="user-scalable=no, width=device-width" /> because when i checked your source code it's not define there.

[Kieran]

when doing mobile or table builds there is a heap of meta tag(name= viewport) options available to you including initial and min/max zoom. This question also deals with the issues of portrait to landscape. stackoverflow.com/questions/1230019/…

[Don Wilson]

adding it to body like sandeep suggested did not work, however your suggestion to add it to .footerbg and the other containing div works fine. Thanks!

[sandeep]

@waletr cameron;it's work in all browser check it because don implemented it.

[Henrik Erlandsson]

I got the same problem only on iPad. Setting user-scalable=no will prevent some visitors from zooming out on smaller screens, which is insane. And "On PC" doesn't mean anything to a web developer.

[sandeep]

@HenrikErlandsson Yes **user-scalable=no ** prevent user from zooming out. So, what is your problem . There are other properties also. Please search them or ask if you facing some problem.

[Henrik Erlandsson]

If elements on your page are wider than 1024px in total, you must set a min-width of the total, of course.

[Don Wilson]

For the future, you should use false !== strpos(...) and not (bool)strpos(...). strpos might return the number 0 which would result in a false (bool), even if iPad is found in the string.