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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b35dd2-e519.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b35dd2-e519.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?