0

I made a website template with divs used for background images which should fill the whole width. It works on common web browsers on Mac / PC but not on iPad and iPhone Safari. Here is a link to the template:

http://www.ivo-fahrzeugtechnik.de/neu/template.html

I put a red border on the part I mean. There you can see that the div is not filling the whole width. Is this normal? How can I fix this? I did not found anything about this problem online.

hapablap
  • 379
  • 6
  • 23

3 Answers3

1

Ok I've found the same problem (had to search for "iOS" not "iPad / iPhone"): iPad background for div blocks not spanning entire width of screen

My solution was to set the min-width of body and all elements, which where to small, to 1024px!

Community
  • 1
  • 1
hapablap
  • 379
  • 6
  • 23
0

If you can't find any solution, use javascript for dynamically sizing the div :

(function(){
  $('yourdiv').css('width', $(window).width());
 })();

It is not the most pretty solution but I hope this will work, let me know if you need more support !

Yordi
  • 166
  • 7
  • This works on common browsers, but causes a fixed size of the divs. Strange to say it doesn't work on iPhone. Thanks for your efforts! – hapablap Feb 15 '14 at 20:20
0

Try to use meta tags with viewport for iOS devices like this:

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

I think it's fix your problem.

melvas
  • 2,346
  • 25
  • 29
  • Unfortunately this causes a zoom in on the iPhone and the affected divs are even smaller. Thanks for your efforts! – hapablap Feb 15 '14 at 20:18