申明：文章部分内容是我在各个网站上以及自己做项目时的总结，出处我已经不记得了。如果遇到版权问题请联系我，我会及时删掉。我是一个刚刚做前端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浏览器，他们我目前还没找出可以让他们全屏的办法。有可能是浏览器的限制，如果亲们发现解决方案，欢迎分享。