Is your website not displaying correctly on the ipad?
Is the ipad scaling your background image and throwing your website contents off?
There is an easy fix for the ipad disproportionately scaling a background image when compared to the rest of your website’s contents.
As you may know, the iPad uses Mobile Safari which, by default, scales websites to fit it’s viewport. It does this to text, images and background images. So, often times when you design a site and get it just right across all desktop browsers, you then find that it looks pretty horrendous on the ipad. This is probably because Mobile Safari is scaling your image accordingly to fit the ipad’s size and screen.
Typically, this is most common when a large background image is assigned to the <body> style. It might be a good idea to create a custom <div> tag for your background image instead of assigning it to the <body>. However, there is a pretty easy fix for this problem.
So, if your website’s background image is getting scaled down and all of your content appears normal, just add the following code to your CSS style where your background image is applied. . .
[box] -webkit-background-size: 1200px 1900px;
(1200 1900 is the size of your image and you may want to play around with the size settings to get
it render exactly how you want it depending on the size of your background image) NOTE: This will only render on WebKit browsers and fix the issue of scaling.[/box]
Below is a screenshot of the .css style sheet for an actual site we applied this to:
