iPad background for div blocks not spanning entire width of screen

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 t开发者_StackOverflowhis is exactly 1004px.

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

---

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.

---

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;
}

---

this works

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

---

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

---

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

Hope this helps!

---

Add in your page's head

<meta name="viewport" content="width=1000px">

It works for all browsers on ipad, not just safari

---

If you/anyone need to fix only in iPads, You can do like

<?php if ((bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
    <meta name="viewport" content="width={{YOUR PREFERED WIDTH FOR IPAD}}">
<?php else: ?>
    <meta name="viewport" content="width=device-width">
<?php endif ?>

Hope this help :)

---

What happens if you try using the viewport meta tag to set the viewport width to the device width?

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

Source: Mozilla Developer Network