iPad上的CSS网站问题

Question

Very strange thing happening on iPad2 safari browser.

The following page (homepage) is cutting off the far right top nav link. It should say "Request a quote", but cuts off at "Requ".

Plus, the page is not auto resizing to fit the iPad screen properly as normal.

Site URL: www.skiplan.co.uk

I have tried using the viewport meta tag, but it just makes it worse.

Any ideas? I just can't see any issues in firebug.

Note: the crappy online iPad emulators show it fine - it's happening on the real/physical iPad2

Answer 1

The iPad's viewport acts as if it is 960px wide, so your site is bigger than its screen. The viewport meta tag is needed to get it to scale correctly, though you might have to play around to get it right.

The other alternative is to use media queries to design a smaller version for smaller screens.

My advice would be to always have a 960px version - 1020px is not a popular width for a reason!

Answer 2

You are most likely using CSS styles like percentages, which break your design later on the iPad as it adapts to the display size container (max dimensions).

Most commonly I see this when people define a box/container in px but font/etc in %' or em`.