Page 1 of 1

iPhone 7s "Zooming" Text

Posted: Tue Feb 07, 2017 8:42 am
by jyoung
So our app has made it into production and one thing that has come up, which we did not notice before is that when a user taps into an input the display "zooms" in.

There seems to be some folks talking about it online as a quick google search of "iphone 7s zoom input box" shows some other devs trying to solve it.

It only appears to be happening on my "Mobile" design which is at 425. Tablet at 768 and Desktop at 1024 are not affected.

According to some of these discussions it seems that setting "user-scalable=0" in the "viewport" meta tag is the right solution. When I inspect the source on our app, the initial-scale and minimum-scale are both 1.

Other comments I have seen talk about setting the font size to 16px. Right now, I don't have any custom sizing besides being set to FillBoth in a 40px Row. Inspecting the HTML, shows the input to be at 15px in Chrome. I can't see what size it is on the iPhone itself.

It would not be a problem, except that it does not "zoom back out" to the original state. Instead the user has to manually size the screen with a "pinch" gesture.

Has anybody else experienced this and is there a LANSA based solution?

Re: iPhone 7s "Zooming" Text

Posted: Tue Feb 07, 2017 12:01 pm
by Stewart Marshall
Hi Joe

I have an iPhone 7+ and I can reproduce the behaviour in both Safari and FireFox. When the font size is 15px or less, both browsers zoom. When it's 16px it stays as is. It seems the nice folk at Apple are concerned that we might be straining our eyes to see fonts that they consider to be too small.

LANSA doesn't expose the user-scalable meta tag at the moment, and even if it did, I'm not sure you'd want to prevent all you mobile users from zooming.

The best I can suggest is that you embrace the 16px font for all mobile devices. You can use the DesignChanged processing to apply a suitable ThemeDrawStyle when the screen width drops below 600.


Re: iPhone 7s "Zooming" Text

Posted: Wed Feb 08, 2017 2:03 am
by jyoung
Since this is an input, I think it is inheriting the Control Theme DrawStyle of "Edit" which is set to 130%.
Which if I am understanding correctly is 130% of the "base" font size of 12px which produces a font-size of 15.6 that renders as 15px.

If I modify the "Edit" Control Theme DrawStyle there is a massive cascade affect that changes all of the fields, list items, Headings etc.. So I can't do that.

I created a new Theme DrawStyle set the font to be 16px, but the font renders out at 20px, which according the Edit Control Theme DrawStyle is correct.

So then I set the Theme Drawstyle to 135% which comes out to 16.2 which rendered out as 16px.

Kinda of a difficult way to go about setting the font-size.

I don't know if its possible, but I would suggest that a "hard coded" font size should just use that size and bypass the Control ThemeDrawStyle.

Re: iPhone 7s "Zooming" Text

Posted: Wed Feb 08, 2017 3:24 am
by jyoung
Unfortunately setting the font-size does not appear to be stopping the "zoom". I set it to 16 and 17px and the zoom still occurs.

Probably going to have be one of those things we just have to live with. Its not a "big" deal but it is a minor nuisance.

I thought about doing what Danny had suggested here and manually overriding the viewport.

If it comes down to it I may have to try it.

Re: iPhone 7s "Zooming" Text

Posted: Wed Feb 08, 2017 10:06 am
by Stewart Marshall
Hi Joe

You're right, a hard coded font size should override a ThemeDrawStyle. That was certainly the intent. However, there appears to be a issue when a percentage font size has been applied. I'll look in to that.

A second DrawStyle with a specific 16px font size can be used to override the first, but it needs to be applied to EditThemeDrawStyle property of a Field and not ThemeDrawStyle.

As for the zooming, I can't get it to go wrong once it's 16px. But as this is a device specific feature, I've no doubt that there are many subtleties that the Apple techs will have implemented. Could you send me screen shot so that I can get some sense of what you have.


Re: iPhone 7s "Zooming" Text

Posted: Wed Feb 08, 2017 12:37 pm
by jyoung
Hi Stewart,
Unfortunately the device is not mine, but my supervisor's. I will try to get a screen shot however. It is an iPhone 7s though. Apparently his and a few other high level VPs and executives are zooming in and not zooming out. He showed me the initial behavior and mentioned it was still zooming after the font size updates. As I write this, I recall that I have not tried recompiling the page after the update. Will try that tomorrow morning. Perhaps its a caching issue again.

Yeah I was setting the ThemeDrawStyle. Will try with the EditThemeDrawStyle tomorrow morning and see if I get some different results.


Re: iPhone 7s "Zooming" Text

Posted: Wed Feb 08, 2017 1:50 pm
by Stewart Marshall
If you make your desktop browser as thin as possible, that should give me enough of a clue.

Re: iPhone 7s "Zooming" Text

Posted: Thu Feb 09, 2017 2:35 am
by jyoung
Finally got this worked out it seems. I think it was in fact another caching issue.

I temporary changed the font color to red just to give me a visual indication that I have all the latest code on the device. Checked in the Theme, the Part and the Page to get them all to recompile.

Spoke with the boss and after clearing the cache, the device still did not want to display the red font but after a few more attempts it finally did.

With the red font we could confirm the font size was set to 16px and the zooming no longer occurred.

So I guess I'll chalk this up to another AirWatch caching issue. :x

Re: iPhone 7s "Zooming" Text

Posted: Wed Jun 19, 2019 11:42 pm
by csturtev
Has Lansa made any corrections since these posts in 2017 besides having to use a larger font size? Our mobile apps all zoom in and then the users must use a "pinch gesture" to have the mobile screen reset to the correct size. The larger font is not preferred, curious if anything else can be done.

Re: iPhone 7s "Zooming" Text

Posted: Thu Jun 20, 2019 8:28 am
by MarkD
What setting do you use here in your web page:
Capture.PNG (8.08 KiB) Viewed 1561 times