iPad Rendering Viewport change

[martharowe]

Hi,

Not so much a bug as something that would be prudent to adjust in the framework:

When viewing a site on the iPad, the Viewport Meta Tag causes the site to be rendered at 768 width, even if viewing in the horizontal orientation.

Which means that graphics may appear fuzzy or just not look like you expected. To fix, change the viewport meta tag to:
<meta name="viewport" content="width=device-width,initial-scale=1">

[emiluzelac]

_s is a starter Theme and this is something you would do on your own. viewport also does not fully control your page we need to adjust media queries as well. One of the solutions is to add max-width to media screens.

[obenland]

_s is a starter Theme and this is something you would do on your own.

True, but we try to be the best starter theme possible. If there is a better viewport meta tag out there, we should use that.

We use: <meta name="viewport" content="width=device-width">
HTML5 Boilerplate, Initializr, Bootstrap use: <meta name="viewport" content="width=device-width, initial-scale=1">
Skeleton uses: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

What is the benefit of setting the initial scale to 1, vs. not setting it at all?

[martharowe]

In my experience without the initial scale set on iOS devices the website shows in the size of the vertical dimension, even when the iPad or iPhone is horizontal.

So on an iPad (non retina), the site renders at 768px width, and then scales up to 1024px width when it is horizontal, which makes the rendering look blurry/soft.

I also found that this helped with rendering on my Blackberry (which has a 320px wide screen)

[emiluzelac]

The initial-scale is needed for some browsers like on iPad because iPad's browser (Safari) will scale 1 CSS pixel and that was the main reason why initial-scale=1 was introduced.

Also see: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_width_and_screen_width

In 2011 HTML5 Boilerplate briefly removed the initial-scale but it was brought back again h5bp/html5-boilerplate#824

If you want to improve +1 on initial-scale :)

P.S. What I note earlier was this: https://gist.github.com/emiluzelac/6344284 the max-width to the rescue, perfect marriage with the initial-scale.

[mfields]

+1 on initial scale. I do not have time to test at the moment, but if this fixes an annoying issue we should definitely add it.

[blakewatson]

If I remember correctly "maximum-scale=1" would prevent the user from zooming (haven't tested), which is less accessible. So I think the revision obenland added is just right—fixes the scale when changing orientation while retaining the ability to zoom.