I have seen this before on other sites, and am curious as to how to fix this on a site I am developing. You can see from this image (http://cl.ly/1Q1f2P0c1g1m2i2U3h0E) what is happening here. I believe that I know the issue, but I do not know how to fix it.
This site has a container div of 978px wrapped around the content. Within that container there is an absolutely positioned div (the burst graphic behind the video player) that is pushed outside of the container to the right. Mobile Safari is taking the container width and adding the amount of pixels the absolutely positioned div is sticking out of the container and using that as the total width of the site.
Yup, Mobile Safari considers that part of the content that is actually pushed outside the container as proper content, and therefore shows it as if the site is more than that designated 978 pixels.
You’ll have to use a method where those bottles (that you see behind the video player) are not considered content, but just styling. I believe the best way to do that is to keep everything within that 978 pixel space (not have anything “escape” that container), and make those bottles a background image of the BODY tag.
Try this by setting the container to overflow:hidden and see if that at least centers the site better. If it does, then you can put those bottles (and that sunshiny splash) as the background image (of this particular page at least).
Another option would be to also have some (empty) content escape the LEFT side of the container, so that the balance is more symmetrical.