Search code examples
cssipadwebresponsive-designmedia-queries

iPad 2 website sizing issue


Ok before I start I will begin by saying I am NOT an experienced web developer!

I am writing this website: http://leydencarcentre.co.uk

It looks reasonable on a desktop browser, but I am struggling with getting an iPad (2) to display it properly.

On an iPad in portrait orientation the "Home" page is zoomed in a bit when you open it, but you can't zoom out to get the whole page width on the screen. The "MOT" page is zoomed out completely so the full width fits in.

In landscape on the iPad they both look correct.

My site is basically 960px fixed width, but note I have tried to make it a bit responsive using media queries. (It's NOT a fluid layout, but there are slightly different div widths for different sizes - Desktop, Tablet, Phone). I've made the main background different colours for each type of layout so you can see when the CSS for each media type kicks in. (the desktop one is white, the tablet antique white, and the mobile Orange).

Can anyone help with this? I've googled things like "iPad website width" and I can't make sense of what's the best way to go.

Any help on this particular iPad issue or advice on my CSS and layout greatfully received!

I know fully responsive fluid layouts are the talk of the town but I'm looking to get this site done pretty quickly. Do I really need a fully fluid layout?

Thanks,

Paul


Solution

  • I went with cale_b in the end as I tried many viewport settings and it either displayed OK on the iPad but not on Chrome under android or vice versa.

    So I added a minimum height to my main body div.

    Thanks cale_b