手机浏览器全屏模式

申明：文章部分内容是我在各个网站上以及自己做项目时的总结，出处我已经不记得了。如果遇到版权问题请联系我，我会及时删掉。我是一个刚刚做前端1个多月的初学者，如果哪里有错误，还请各位大神们不吝赐教。欢迎吐槽与分享。

有时候由于项目需要，我们希望我们做的网页在手机浏览器上可以像APP一样，在浏览器上全屏显示，经过一段时间的开发及测试发现，可以用<meta>就能解决。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1.0,user-scalable=no,minimal-ui"/>

关键在于最后的minimal-ui，但这个在ios7上是支持的，在ios8上苹果取消了，因为认为这是不友好的操作。

在分享一些常用的浏览器

<!-- UC浏览器全屏 -->
<meta name="full-screen" content="yes">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

以上是我测试过的，下面是在网上看到的其他老的浏览器，但没有机器所以没有测试过。分享出来给需要的朋友。
<!-- 是针对一些老的不识别viewport的浏览器，列如黑莓 -->

<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->

<meta name="MobileOptimized" content="320">

 

在分享一段JS来控制布局的code把，我试过，针对部分浏览器也是有用的，不过对我的项目而言，好像整个布局会整体偏下，应该改改就可以了。

function hideAddressBar_ios(){
            if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
                bodyTag = document.getElementsByTagName('body')[0];
                bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
            }
            setTimeout(function(){
                window.scrollTo(0, 1);
            }, 100);
        };
        function hideAddressBar_android(){
            var n = navigator.userAgent;
            if(n.match(/UCBrowser/i)){
                //uc浏览器
                hideAddressBar_ios();
                return false;
            }
            var self = document.getElementsByTagName('body')[0];
            if (self.requestFullscreen) {
                self.requestFullscreen();
            } else if (self.mozRequestFullScreen) {
                self.mozRequestFullScreen();
            } else if (self.webkitRequestFullScreen) {
                self.webkitRequestFullScreen();
            }
        };
        window.addEventListener("load",function(){
            navigator.userAgent.match(/Android/i) ? hideAddressBar_android() : hideAddressBar_ios();
        });

很遗憾，以上code并不能解决小米自带的浏览器以及safri浏览器，他们我目前还没找出可以让他们全屏的办法。有可能是浏览器的限制，如果亲们发现解决方案，欢迎分享。

转载于:https://www.cnblogs.com/rainehappy/p/4602336.html