Possible to stop Safari from zooming in when text field is tapped?

I’m mocking up a responsive web page and love invoking the keyboard by tapping a text field in my 320 px wide mockup on the iPhone. However, Safari zooms in when the text field is tapped.

Is it possible to suppress this zoom?

The only way to restore the browser window to fit the screen after tapping the “Done” button on the keyboard is to pinch and zoom out which ruins the responsive web feel of the demo.

Any suggestions?

Thanks.

Hi Toraishikuru - Have you tried changing the mobile option “User Scalable” to “no”. Sounds like this would work, hopefully the browser doesn’t still force the zoom.

Brilliant!
Thanks Paul.
Happy Holidays.

hello

where is this setting? i have the same problem.

Hi handyaner,

You can find the “User Scalable” field by going to “Publish > Generate HTML > Mobile/Device” and enabling the “Include viewport tag” checkbox:

Hopefully that helps! :slight_smile:

I am having trouble with this. I have set this as indicated, exported as HTML, uploaded to my website and the zoom is still happening. The code looks right when I view it in Notepad, but when I inspect in Chrome mobile view, the code is wrong. Can someone help me?

Hi Katelyn,

Entering “no” in the User Scalable field seems to be working in the iOS device on our end. Can you attach a copy of your RP file? If you’re unable to share the specific RP file, feel free to recreate the issue in a new one (via “File > New”), enter “no” in the User Scalable field at “Publish > Generate HTML Files > Mobile/Device > User Scalable”, and attach it here. If possible, please also include a link to your hosted prototype or publish it to Axure Share (“Publish > Publish to Axure Share”) and provide the generated link. Thank you!