Search code examples
htmlcssiphonesafarimobile-safari

When typing on iPhone, screen zooms in?

Hello

I am building a chat room site, however it runs into a problem on iPhone (or possibly safari I have not checked yet).

When you start typing in the input which is position: fixed to the bottom, the screen zooms in, and you have to manually zoom out to see the send button. I know this was not very explanatory, so I will put my code here:

Sloppy code that works sometimes (except now)

input {
  font-size: 150%;
  width: 83vw;
  height: inherit;
}

form {
  position: fixed;
  bottom: 0px;
  left: -2px;
  height: 6vh;
  margin-bottom: 0px;
}

form button {
  width: calc(17vw + 2px);
  font-size: 150%;
  position: fixed;
  right: -2px;
  height: inherit;
}
Solution

  • This is not anything to do with your code. I am a long time iphone user and could say that iphone does this automatically. When the keybord is initiated it automatically zoom to a point where you can see what you are typing effectievly.