移動端UC /QQ 瀏覽器的部分私有Meta 屬性

如同桌面端同樣，在國內作web 移動開發的話確定得考慮下移動端佔有率靠前的幾個國產瀏覽器的一些適配工做。好在當前移動端瀏覽器都是wekit 內核一霸天下，單從這個角度看兼容工做相對於桌面的百花齊放舒服了很多。

數據就不羅列了，目前移動端國產瀏覽器的佔有率上是UC 跟QQ 瀏覽器這對基佬，因此作前端確定優先考慮這二貨。下面就說下移動端UC /QQ 瀏覽器的部分私有Meta 屬性，都來自其開發者文檔（UC開發者中心，左下一doc文檔，QQ瀏覽器）。

UC 瀏覽器的部分私有Meta 屬性

設置屏幕方向爲橫屏仍是豎屏

<meta name="screen-orientation" content="portrait|landscape"> 

設置是否全屏，yes表示強制瀏覽器全屏

<meta name="full-screen" content="yes"> 

縮放不出滾動條

<meta name="viewport" content="uc-fitscreen=no|yes"/> 

設置no後用戶縮放與標準瀏覽器縮放一直，設置爲yes後，用戶縮放金放到圖片和文字，不出現橫向滾動條。

排版

<meta name="layoutmode" content="fitscreen|standard" /> 

fitscreen模式簡化頁面處理，適合頁面閱讀節省流量，standard模式和標準瀏覽器一致；一旦設置layoutmode meta後，用戶使用瀏覽器提供的的排版模式選項將會無效。

夜間模式

<meta name="nightmode" content="enable|disable"/> 

nightmode的值設置爲disable後，即便用戶使用瀏覽器的夜間模式，頁面的表現也仍然是非夜間模式。

強制圖片顯示

<meta name="imagemode" content="force"/> 

UC瀏覽器爲了節省流量，爲用戶提供了無圖模式，可是若是頁面的圖片是必不可少的，如驗證碼的，須要強制瀏覽器顯示圖片，能夠設置imagemode， 不影響子頁面。經過META設置圖片加載方式會做用於整個頁面，若是但願對單個圖片進行設置，那麼可使用這個

<img src="" show="force"> 

應用模式

<meta name="browsermode" content="application"/> 

使用了application這種應用模式後，頁面講默認全屏，禁止長按菜單，禁止收拾，標準排版，以及強制圖片顯示。

QQ 瀏覽器x5內核定製標籤說明

設置屏幕方向

<meta name="x5-orientation" content="portrait|landscape" /> 

設置全屏

<meta name="x5-fullscreen" content="true" /> 

設置屏幕模式

<meta name="x5-page-mode" content="app" /> 

對比

在實際使用的狀況中，發現對於控制全屏的meta 標籤，UC 跟QQ 處理的方式稍有不一樣：區別在於處理系統狀態欄，UC 是直接覆蓋系統狀態欄，而QQ 仍然保留之。從原生應用的場景及用戶角度看，QQ 的這種「僞全屏」反而是更爲友好。

說點廢話：升級到安卓微信最新版，發現微信內置的瀏覽器已經換爲qq的x5瀏覽器內核了，而非以前的採用默認瀏覽器的內核。這個改變值得確定，畢竟對於質量良莠不齊的安卓默認瀏覽器，x5瀏覽器內核對於HTML5等的支持相對更加優秀。加上目前微信的霸主地位，更多的H5場景可能更可能是在微信內置瀏覽器中展開。也從這個角度，UC瀏覽器市場佔有率的數字朝不保夕——若是你將微信內置瀏覽器歸爲QQ 瀏覽器。