1, mobile terminal will not use native development, sometimes simply provide an activity or viewController in Android and iOS, and then display a full screen of WebView, load a web page content in the WebView. The page to load can then be handed off to someone else to develop.
2, in general, if the page layout is simple, without the use of floating positioning and other properties, basically no problem. However, it is very common to use position: Fixed at the bottom of the input box. But it is this property that causes compatibility problems.
3, since it is compatible with the problem, that is to say that some normal. What’s not normal is iOS. The simple reason is that iOS invalidates fixed when you are ready to input, so iOS can move the input box up and down according to its calculation and place it right on the soft keyboard.
4. If the story is only here, the problem is that the soft keyboard pops up and the fixed related to the input box fails when scrolling the page, resulting in the scrolling of the page. But good die die, if you are in the iOS WeChat side open the web page, will be surprised to find that sometimes pack up soft keyboard, input box transparent, yes, transparent, not disappear, that is to say, if you click on the bottom of the corresponding position, it will also get focus pop-up keyboard and opaque again.
5. It’s not clear how this works, but it probably has something to do with how iOS handles browsers.
6. The possible solution is to use absolute instead of fixed as far as possible, and not allow the user to scroll the page when the keyboard is lifted, which means to add an addEventListener() event named TouchMove to the relevant element. When the scroll is monitored, the keyboard will fold up and the page will become full screen scrolling. That’s a compromise, too, because if the user says I’m going to scroll the top area when I pop up the keyboard, well, let me think again.
