You've referenced this article in your sass/css comments: http://www.456bereastreet.com/archive/201012/controlling_text_size_in_sa...
.. but missed a key part. If you don't add the ", initial-scale=1" to the viewport meta the type is scaled up on the ipad at least. Adding the initial-scale declaration causes you to have to pinch out when switching from portrait to landscape, but causes the text to be displayed unscaled which is likely to be the intent of the web team.

CommentFileSizeAuthor
#1 1615526-zen-5-initial-scale.patch510 bytesfearlsgroove

Comments

fearlsgroove’s picture

Component: PHP/JS code » CSS/SASS/HTML markup
Status: Active » Needs review
StatusFileSize
new510 bytes

patch attached

johnalbin’s picture

Status: Needs review » Closed (works as designed)

Nope, didn't miss the part about initial-scale=1.

Apparently, that scaling is done on purpose in iOS when the orientation is changed.

See the discussion in drupal 8 core: #1468582: Add mobile friendly meta tags to the html.tpl.php starting at comment #49.

mrryanjohnston’s picture

I'm not sure if this is what fearlsgroove meant originally, but the following problem still exists: When viewing a Zen-themed site in landscape mode on an iOS device, the initial scale is zoomed in.

This should be fixed somehow. I'm not exactly a standards ninja, but there are a few fixes out there. This one, which at least tries based on the reported UA, seems to directly address the issue: https://github.com/scottjehl/iOS-Orientationchange-Fix (doesn't work for my usecase).

Another option is to use something similar to what susy's website uses.

Once again, I'm not saying this is the best solution, but there should be some kind of consideration for this weird little iOS quirk.

IdanC’s picture

#1 worked like a charm, thanks!

izmeez’s picture

I noticed this on an iPod mobile Safari with 7.x-5.x but as I recall it was not happening with 7.x-5.1 when testing that version of zen. I haven't gone back to confirm. This landscape zoom problem is only happening on the iOS mobile platform. I'll try the patch and see. Thanks.

izmeez’s picture

Status: Closed (works as designed) » Needs work

A have re-opened this issue at the risk of having my hands slapped.

Patch in #1 applies without problems to 7.x-5.x and is a partial fix in that the responsive layout on a small iPod touch device in landscape is the correct layout but it is still zoomed in and requires the user to pinch it back to fit. At least now the layout is not broken in landscape mode.

Maybe I should be opening a separate issue, that being how the layout was broken which I presumed was because of the zoom as both of these issues arose together and I am almost certain neither was the case on a 7.x-5.1 test subtheme.

Or maybe the layout breaking is more descriptive of issue https://drupal.org/node/1861972.

izmeez’s picture

I've read through the posts linked to in comment #2.
I am not expert in these matters but judging from my own experience and with some of these comments:

https://github.com/h5bp/html5-boilerplate/issues/824#issuecomment-2980458
https://github.com/h5bp/html5-boilerplate/issues/824#issuecomment-19435145

I am in support of the patch.
It does not remove the zooming on rotation to landscape but it does fix keeping the text scaling correct and the breaking of the responsive layout on iOS devices. With the patch the responsive layouts continue to behave as expected on android devices including smartphones and tablets that I have tested. Sorry, I don't have an ipad here to test.

Either that or there is a problem elsewhere that the patch is overriding.
Or i'm missing something other than a better user experience :-)

izmeez’s picture

Status: Needs work » Needs review

Just changing the status to be more correct. Thanks.

johnalbin’s picture

Status: Needs review » Closed (won't fix)

By adding this initial-scale=1 to the meta tag, you'd introduce a scaling bug. See http://filamentgroup.com/examples/iosScaleBug/

Without that part of meta tag (as Zen and Drupal 8 is now), the iOS devices work as Apple designed them. When you rotate an iOS device to landscape it is supposed to zoom to the same viewport width as is used in portrait mode.