1

I'm trying to create a mobile friendly web page. When I view it on a mobile, I have to zoom out to see the correct size. How can I get it to display normally without having to zoom out? I'm using the below code:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
Teja Sree
  • 59
  • 1
  • 3
  • 9
  • May be this is an answer for your question https://stackoverflow.com/a/4472910/9034168 – Efe Mar 07 '18 at 10:07
  • Possible duplicate of [How can I "disable" zoom on a mobile web page?](https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page) – Daniel E. Mar 07 '18 at 10:12

1 Answers1

0

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

Additionally, the select element needs to 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 necessary to use all the above, you can just style the elements you need, eg: just text, number, and textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

An alternate solution to having the input elements inherit from a parenting style:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Hope it helped you out.

From this answer

Didix
  • 567
  • 1
  • 7
  • 26