CODEWITHSUNDEEP
cssiphonesafari
Sir Rubberduck
Sir Rubberduck

Reputation: 2252

input zoom on iPhone/Safari not prevented with 16px

Can someone please help me with this satanic problem...

I read all the guides that the solution is setting the inputs to 16px but it still doesn't work, and it drives me insane.

@media only screen and (max-device-width: 600px) {
    input {
        font-size: 16px;
    }
}

I don't understand... Why doesn't it work?

Upvotes: 0

Views: 7776

Answers (6)

Даниил Пронин
Даниил Пронин

Reputation: 1306

If you want to apply some styles for iPhone, you should detect a touch screen:

@media (hover: none) and (pointer: coarse)

so, to set font-size on touchscreen for inputs, you should do this:

@media (hover: none) and (pointer: coarse) {
  input[type=text] {
    font-size: 16px;
  }
}

Upvotes: 0

Usman Arshad
Usman Arshad

Reputation: 868

Solution #1

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    select,
    select:focus,
    textarea,
    textarea:focus,
    input,
    input:focus {
      font-size: 16px;
    }
}

This media query will target only iOS devices

Below is the articles to implement media queries only for targeted devices.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Solution #2

If your website is properly designed for a mobile device you could decide not allow scaling.

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

Upvotes: 1

Ryan H
Ryan H

Reputation: 2945

I tend to typically just specify a few of the most popular input types to set their font size rather than loads, and I wouldn't recommend just targeting input since this could affect things like checkboxes too...

input[type="tel"],
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="assword"],
textarea {
  font-size: 16px;
}

Upvotes: 1

David Ngumbu
David Ngumbu

Reputation: 199

You can add this code to your html code in the <head> tag in html: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> the maximum-scale=1 will prevent the zooming of the input and the pages zoom will retain its default zoom level, but the user can still crop the screen to resize if the user wants to.

Upvotes: 2

Ale Plo
Ale Plo

Reputation: 819

I think you need to target the text area, not only the input

textarea {
       font-size: 16px;
     }

. Also,depending on the input I would use any of these:

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;
 }

Upvotes: 0

Gleb Shaltaev
Gleb Shaltaev

Reputation: 254

You need one more attribute:

@media only screen and (max-device-width: 600px) {
    input {
        -webkit-appearance: none;
        font-size: 16px;
    }
}

Upvotes: 0

Related Questions