Geek Answers Handbook

IPhone keyboard compresses modal size for web application

I have a website that has a modal one. When a div is clicked, the modal pops up. There is an input in the module. When viewing the site on a mobile device, I have a problem, when I press the enter button, the iPhone keyboard appears. The modal model remains the same, but if I close the iPhone keyboard, the modality will decrease to the screen size minus the size of the keyboard.

+5
source share
2 answers

There seems to be a bug with iOS and rendering elements position:fixed; when using virtual keyboards .

You should try changing your modal mode to using position:absolute; and see if it fixes the problem.

You can also try the "User Agent Usage Method" here .

+2
source

It's hard to say without seeing any code, but maybe you need to add a metadata tag to the viewport meta

If you have not already done so, try the following:

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

More articles:


All Articles