申明：文章部分內容是我在各個網站上以及自己做項目時的總結，出處我已經不記得了。如果遇到版權問題請聯系我，我會及時刪掉。我是一個剛剛做前端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瀏覽器，他們我目前還沒找出可以讓他們全屏的辦法。有可能是瀏覽器的限制，如果親們發現解決方案，歡迎分享。