Heads-up: 'user-scalable=no' now basically disabled in Mobile Safari

phiw13 · 2016-09-29 00:57:22

MobileSafari on iOS 10 (and by extension, all other browsers running on iOS) effectively killed the user-scalable=no and maximum-scale=1.0 viewport meta tag values. Users will be able to zoom in on a webpages, even when this meta tag is specified. This is great for accessibility. Yay, I can get rid of my bookmarklet, which was always a hard to use and ugly hack.

Note that this only applies to webpages. Embedded web views (apps) will still be able to prevent scaling.

One source – Via.

I haven’t tested this yet extensively, as I haven’t updated our devices to iOS 10 just yet, only the iPhoneSE, which is my wife’s device.

PS – that means that Hive could get rid of that meta tag value, as it does nothing anymore. It also makes Hive on iOS more usable for my old eyes and fatty fingers.

Ideal meta tag (taking into account split view):

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Last edited by phiw13 (2016-09-29 01:10:04)

philwareham · 2016-09-29 09:26:18

By ‘Hive’, do you mean the admin theme? It also has this meta tag in place so does that affect the above?

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

phiw13 · 2016-09-29 09:30:48

philwareham wrote #301817:

By ‘Hive’, do you mean the admin theme?

Yes.

It also has this meta tag in place so does that affect the above?

<meta name="mobile-web-app-capable" content="yes">...

No idea.

Does that actually do something sane? I.E. clicking something (link, button) doesn’t send you to mobileSafari and ask you to login, and from there on you work in MobileSafari? I have vague recollection that was the case…

philwareham · 2016-09-29 09:35:14

phiw13 wrote #301818:

Does that actually do something sane?

It sets whether a web application runs in full-screen on WebKit mobile browsers.

phiw13 · 2016-09-29 13:06:55

I stole the iPhone SE running iOS 10 up-to-date and ran a quick test with Hive & Hive Neutral.

Nothing prevents the user from zooming in on the page if he or she wants.
One thing the maximum-scale=1, user-scalable=0 meta values do (and I’m not sure which one of the two… – didn’t test) is preventing the scaling of input form controls when the user focus them (given the font-size used by Hive theme, that scaling should happen otherwise).

IOW

page scaling is never disabled (Yay!)
form controls scaling happens when maximum-scale=1, user-scalable=0 is not specified, unless the user has scaled the page previously.

<meta name="apple-mobile-web-app-capable" content="yes"> doesn’t seem to do anything on this device – the location/search bar at the top and the toolbar at the bottom display the same for Hive theme as for Sand space theme (which doesn’t specify that meta tag).

philwareham · 2016-09-29 13:21:52

Hmmm, just been reading up more on mobile-web-app-capable and it’s apple prefixed version. Only seems to be used if the user has added the location to their home screen and launch from there. It then provides the app in a window without browser skin plus a few more behaviour changes. Android doc is here, Apple version works much the same. If you think it’s of no value I can remove.

phiw13 · 2016-09-29 13:54:57

Yes that is what I remember. It is only useful for single-page application like things, or you need to rewrite all your links / buttons to not open a new “page” in HTML parlance. I remember testing that once with TXP (long time ago). The home screen link / page would open in a standalone web view, but performing any action would then open Safari with the (full) browser chrome. Dunno if much has changed since then.

I don’t think it adds much value for Textpattern (and I’ve no idea about the Android behaviour).

PS – you should think about improving your font stack to:

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;

At the same font-size, it is more readable than the Helvetica, Arial combo that you use now, and well fitted for an admin UI.

philwareham · 2016-09-29 13:59:08

OK, all these suggestions can go into 4.7 dev work – thanks!

philwareham · 2016-09-29 14:58:05

I’ve changed the meta viewport and removed web-app metas in 4.6.1 and 4.7.0 branches now. The font stack I will test and put in 4.7.0 only. Cheers for the suggestions, very helpful.

phiw13 · 2016-09-30 07:41:30

BTW – the Safari/Webkit people plan to write a blog post about this (https://webkit.org/blog/). – see this twitter thread

The fast-tap clicks (changes) mentioned in that twitter thread is already documented

philwareham · 2016-09-30 07:57:21

Thanks Philippe, very informative as usual.

Textpattern CMS

Textpattern CMS support forum

#1 2016-09-29 00:57:22