I have created a site and it works fine on all the major browsers unfortunately when viewed on a mobile device it is viewed at full height so the width of the site changes per page and I have an annoying white space to the right of the screen.
I have tried meta name="viewport" content="width=988" or (width=988) this does not seem to make any difference or meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" (or variations of it).
this really messed things up as it cut off the right third of the background images. Both leave the white space to the right. I have also tried :
@media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */
@media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */
in the css but this hasn't done anything, in fairness I don't really understand how that's supposed to work. I think the main problem is the ipad wants to scale the page to full height and I want it full width.
Any ideas?