2

I try to make project with react.But when i click to input, mobile keyboard resize to viewport how can i prevent that ? And if you noticed when opened to my deploy my second issues is my login and signup images doesnt move smooth at first time.And i would be glad if you check my project and give me feedback.

deploy: https://mook-f2b4e.web.app github link: https://github.com/UmutPalabiyik/mook enter image description here

Umut Palabiyik
  • 313
  • 6
  • 16
  • Hi, could you explain further what 'mobile keyboard resize to viewport' means? Do you mean that when the mobile keyboard shows that the viewport is resized? – A Haworth Nov 01 '21 at 21:46
  • Yes exacly.Sorry for my explanation :) – Umut Palabiyik Nov 01 '21 at 21:59
  • Does this https://stackoverflow.com/questions/39585950/mobile-keyboard-changes-html-viewport-size help at all? Their solution seems to be to work in px based on initial viewport size. Means it won’t work on desktop if user changes viewport I guess. – A Haworth Nov 01 '21 at 22:16
  • that didn't work either. – Umut Palabiyik Nov 01 '21 at 22:57
  • Not sure what didn't work means in that case. If everything was defined in absolute units (e.g.px) then the size of the viewport would be irrelevant. – A Haworth Nov 02 '21 at 03:36
  • I don't want the mobile keyboard to shrink my viewport and it didnt work.That was what i meant :) – Umut Palabiyik Nov 02 '21 at 10:05

1 Answers1

-1

This is likely because the font size on your inputs is lower than 16px. Most mobile browsers will zoom the viewport in when an input or textarea gets focus if the size is below 16px.

input, select, textarea {
  font-size: 16px;
}

Once the input elements have a 16px size, that viewport zoom should no longer happen. If your web site/application is responsive, you could include these styles in a media query to only have 16px inputs on mobile.

brianespinosa
  • 2,408
  • 12
  • 22
  • 1
    It didn't work. – Umut Palabiyik Nov 01 '21 at 20:57
  • @UmutPalabiyik the only reason it would not have worked is if you have CSS that is overriding the size of the inputs with higher specificity... like this: https://github.com/UmutPalabiyik/mook/blob/99487ca709d607a3e433f841895232de84191e71/src/Styles/Components/LoginModal.scss#L73 – brianespinosa Nov 02 '21 at 21:39