Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

I made an HTML page that has an <input> tag with type="text". When I click on it using Safari on the iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?

1 Answer

0 votes
by (40.7k points)

If the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari) then the browser will zoom.

In addition to that, the select element must have the focus pseudo-class attached.

input[type="color"],

input[type="date"],

input[type="datetime"],

input[type="datetime-local"],

input[type="email"],

input[type="month"],

input[type="number"],

input[type="password"],

input[type="search"],

input[type="tel"],

input[type="text"],

input[type="time"],

input[type="url"],

input[type="week"],

select:focus,

textarea {

  font-size: 16px;

}

It's not mandatory to use the above code, you can just style the elements you need, eg: just text, number, and textarea like this:

input[type='text'],

input[type='number'],

textarea {

  font-size: 16px;

}

Another solution is  that you can have the input elements inherit from a parent style this way:

body {

  font-size: 16px;

}

input[type="text"] {

  font-size: inherit;

}

Browse Categories

...