Adapting a 960 questionnaire form with text input fields for 320 width. Seems relatively painless until it’s tested on an iPhone. The text input field is magnified to fill the screen, and there doesn’t seem to be a way to move to the next input field. Two problems: Tap that “Go” button and you send your form without having completed it and you have to manually “pinch” to return to 320 presentation. There’s no “tab” capability on a standard keyboard. What am I missing?
Hi.
An Android smartphone? Just kidding.
There, this key is assigned to “Next”, which then leads to the next form field.
Both “problems” have nothing to do with Sparkle, but are in the nature of an iPhone. Maybe you can change the keyboard or the function of the key.
Mr. F.
The convention on iOS is that a text input with a text size of at least 16 pixels won’t be zoomed in. I guess we could find a way to add this in the Sparkle user interface.
The minimal iOS UI assumes their users will know the up/down arrows (on the bar where the “Done” button/label is) will go to previous and to next field. Those replace the tab.
Yes, thanks. Forgot about those buttons.
I improved the zoom problem (at least on an iPhone) with a 320-only embed of:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
on the page which prevents automatic zooming but still allows pinch zooming on the iPhone (since iOS 10). Android pinch-to-zoom may be inhibited on this page though (don’t have one to try, but Stack Overflow seems to infer it). I kinda hoped there might be some meta-style tag to force the keyboard “Go” (Return?) button to behave as “Next”, which would be appropriate with the accompanying Submit button on the page. Haven’t found that yet.
What if you specified a narrower width for iPhone, say 300 pixels to give the form some breathing room?
Dave
Mac Man
I never have the iPhone zoom in on my forms!
As Duncan mentioned if you keep the text size to 16 and above iOS will not zoom into your form for the User to make out what is written.
This is Apple’s iOS compensating for forms that isn’t correctly formatted for mobile Users, especially in the legibility department. Once formatted correctly you can remove the code you have introduced because it is not necessary.
Thanks @FlaminFig - I have to quit trying to solve 2 problems simultaneously as a new user! I appreciate the reminder about 16 pt font in Text Input fields… it does indeed stop the zooming problem, although the 320 layouts seem to work best with full-width boxes at that size, so a bit more reorganization. Non-input text, of course, don’t cause zooming, so can be ANY size. A Sparkle app setting of low/high auto-font-resizing limits would be nice.
Thanks again.
1 Like