Prevent iOS zooming when focusing input elements

[brettinternet]

Mobile browsers on iOS devices "zoom" in on focused input elements when form elements are less 16px font-size.

For additional context, I provided a similar request to StackOverflow in a meta conversation. There are two possible solutions to this issue that I'm aware of:

(a) Give inputs font-size of 16 pixels

If mobile font-sizes in text inputs and text areas are at least 16px, browsers on iOS devices won't zoom into the element when the user selects the input.

Because the necolas/normalize CSS stylsheet adds font-size: 100% to all inputs, the input font size uses the body's which is 14px with the Tachyon class f6. The solution likely won't require removing the f6 class. Something likely this in main.css and popup.css would probably work.

input[type="text"],
input[type="url"],
input[type="password"],
textarea {
    font-size: 16px;
}

Unless you can think of any other selectors that should also be included.

(b) User scalable "hack"

A less common and disadvantaged solution, is one that Maciej employs on Pinboard's mobile site. He disables user-scalable viewport option within the viewport meta tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
                                                                                         ^^^^^^^^^^^^^^^^

Unfortunately, using this method is an accessibility issue for users that might need to zoom. It's more practical for a site with a map. We could opt for this solution if you felt strongly in favor of the frontend's small font-size.

---

If you're open to it, I'd be happy to perform a PR.

[jonschoning]

I'm inclined to go with b) rather than messing with all the font sizes on the site.

Optionally, in the future maybe there just an option on the settings page that flips whether user-scalable is enabled or not

[brettinternet]

I've pushed both options for you to take a look. I found that option A wasn't very disruptive to your original look and feel.

Either option would be a big help to me while I'm bookmarking on mobile. 🙂

[jonschoning]

merged