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.

Answer 1

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 :)

Answer 2

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

Answer 3

Add in your page's head

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

It works for all browsers on ipad, not just safari

Answer 4

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.

Answer 5

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

Answer 6

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