Mobile vue project, hiding the top address bar and the bottom toolbar

use vue as a mobile h5 page project. To achieve a similar full-screen effect, remove the address bar and bottom toolbar of the mobile browser 

<meta name="browsermode" content="application">
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<meta name="360-fullscreen" content="true" />
The

project is in single-page mode, so it"s good to enter it for the first time. There are no address bars and toolbars, but as long as the path jumps, navigation bars and toolbars will appear. Manual refresh will be hidden again.
I can"t do it even if I try to implement it in js scrollTop.
Why did this happen? is there any way to solve it?

Javascript vue.js html5
May.20,2022

refer to this article to see https://blog.csdn.net/hbcui19...

try this demo 


</head>

<body>
  <div>123321</div>
  <script>
    //
    function requestFullScreen() {
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    }
    //
    function exitFullscreen() {
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    }
    document.body.addEventListener('click', function () {
      requestFullScreen();
      //exitFullscreen();
    }, false);
  </script>
</body>

</html>

Previous: Baidu map information pop-up box style modification!

Next: A question about this

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu