Mobile rem layout. On a mobile phone with a virtual keyboard, the tab of the lower fixed is obscured by a virtual reality keyboard. How to solve this problem?

problem: mobile app, is laid out with rem, and on phones with virtual keyboards (Android phones, such as Huawei and oneplus, the content area is obscured by virtual keyboards.
solution: try to solve it natively, but you can"t solve it all the time.
Screenshot of specific problems:

add: think it is the problem of fixed positioning, but try to fill the full screen of the content and find that the problem still exists. If you want to achieve the effect of qq, find a way.

Mar.28,2021

I don't see the keyboard

native solution. The height of webview has been changed. Mobile phones with shortcuts will be automatically displayed below when the shortcuts come out, without affecting the layout.

in fact, it is more common to detect the height of the screen. If the height change does not have a value, it means that the keyboard pops up, and the innerHeight will become smaller. At this time, the js will be re-positioned

var original = document.documentElement.clientHeight;

        window.addEventListener("resize", function() {
            var resizeHeight = document.documentElement.clientHeight;
            if(resizeHeight != original) {
                $('.footer').css('display', 'none');
            } else {
                $('.footer').css('display', 'block');
            }
        });

I would like to ask how the landlord solved the same problem, but I have an H5, not an APP

how to solve the H5 end.

Previous: There is a problem with the way mysql5.7 builds the index.

Next: How to generate reverse fillet by css