Menu icon Foundation
iPad display issue

Hi

I'm developing a new website, using the Reverie theme for Wordpress, which is still based on Foundation 4, I think. I have been preparing the site to display responsively on different devices, but when viewing it on an iPad 3, it's not displaying as I expected (or want it to).

I'm working on the principal that the iPad browser size is 1024x 768, and that should suit with my desired break points.

To see the site, go to http://www.velopilot.co.uk/about-us/. The site is currently private while it is in development, but you can access it to preview using the password victorpapa.

This first image (below) shows how the page at www.velopilot.co.uk/about-us/ is meant to look on an iPad in landscape. It is displaying the desktop style navigation bar (the mobile navigation bar should only kick below about a 950px browser window width) and the ruler shows the pixel width of the browser window to be about 1024px. This ruler is displayed as a background element, so should remain at 1:1 size, and won't rescale for different window sizes.

Vp ipad mock up

This second image is an actual screenshot from our iPad 3, and does not look right. The screenshot was actually saved at 1290px width, but here is resized to 1024px, to reflect the reported display size in safari on the ipad. Here, the entire site seems 'enlarged' including the ruler, which is only showing about 750px of width, so is clearly not displaying at a 1:1 pixel scale which it theoretically should. The logo and background are not sharp either, consistent with images that are being displayed at above 100% size. Also, the mobile top bar menu has kicked in, consistent with a browser width below 950px, in spite of the fact that the landscape iPad browser should be over 980px.

Vp ipad mock up phils

Here the two screenshots are overlaid, to show the difference in displayed sizes, a difference of about 25% in terms of size / pixel density.

Vp ipad mock up overlay

I'd like to konw how anyone else is seeing this on an iPad (or comparable tablet). Is this universal issue, or is there a settings or zoom problem that I'm missing on our tablet (I've looked into that, but can't find anything). I think I must be missing something - can anyone cast any light on why my site isn't displaying as it should?

Thanks for your help.

ipadlayoutwordpress

Hi

I'm developing a new website, using the Reverie theme for Wordpress, which is still based on Foundation 4, I think. I have been preparing the site to display responsively on different devices, but when viewing it on an iPad 3, it's not displaying as I expected (or want it to).

I'm working on the principal that the iPad browser size is 1024x 768, and that should suit with my desired break points.

To see the site, go to http://www.velopilot.co.uk/about-us/. The site is currently private while it is in development, but you can access it to preview using the password victorpapa.

This first image (below) shows how the page at www.velopilot.co.uk/about-us/ is meant to look on an iPad in landscape. It is displaying the desktop style navigation bar (the mobile navigation bar should only kick below about a 950px browser window width) and the ruler shows the pixel width of the browser window to be about 1024px. This ruler is displayed as a background element, so should remain at 1:1 size, and won't rescale for different window sizes.

Vp ipad mock up

This second image is an actual screenshot from our iPad 3, and does not look right. The screenshot was actually saved at 1290px width, but here is resized to 1024px, to reflect the reported display size in safari on the ipad. Here, the entire site seems 'enlarged' including the ruler, which is only showing about 750px of width, so is clearly not displaying at a 1:1 pixel scale which it theoretically should. The logo and background are not sharp either, consistent with images that are being displayed at above 100% size. Also, the mobile top bar menu has kicked in, consistent with a browser width below 950px, in spite of the fact that the landscape iPad browser should be over 980px.

Vp ipad mock up phils

Here the two screenshots are overlaid, to show the difference in displayed sizes, a difference of about 25% in terms of size / pixel density.

Vp ipad mock up overlay

I'd like to konw how anyone else is seeing this on an iPad (or comparable tablet). Is this universal issue, or is there a settings or zoom problem that I'm missing on our tablet (I've looked into that, but can't find anything). I think I must be missing something - can anyone cast any light on why my site isn't displaying as it should?

Thanks for your help.

Martin Harrison over 5 years ago

OK, I've found the answer to my problem with the help of a friend, here:

http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

Just to wrap this up neatly, it seems the key bit is the viewport meta tag, which is coded as standard in the framework as

<meta name="viewport" content="width=device-width" />

Which defaults the site to the width of the device, but does so using the devices portrait width. It seems that's an iOS thing.

Changing that code to

<meta name="viewport" content="width=device-width, maximum-scale=1.0"  />

prevents the site from scaling above 1:1 ratio, forcing it to accept it's intended width, and display as I want it to.