標籤:fit 資料 使用者 通過 more 最新 模式 處理 isa
如同案頭端一樣,在國內做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" />
對比
在Jeff 的實際使用的情況下,發現對於控制全屏的meta 標籤,UC 跟QQ 處理的方式稍有不同:區別在於處理系統狀態列,UC 是直接覆蓋系統狀態列,而QQ 仍然保留之。從原生應用的情境及使用者角度看,QQ 的這種“偽全屏”反而是更為友好。
說點廢話:升級到安卓最新版,發現內建的瀏覽器已經換為qq的x5瀏覽器核心了,而非之前的採用預設瀏覽器的核心。這個改變值得肯定,畢竟對於品質參差不齊的安卓預設瀏覽器,x5瀏覽器核心對於HTML5等的支援相對更加優秀。加上目前的霸主地位,更多的H5情境可能更多是在內建瀏覽器中展開。也從這個角度,UC瀏覽器市場佔有率的數字岌岌可危——如果你將內建瀏覽器歸為QQ 瀏覽器。
原文連結:https://devework.com/uc-qq-brower-meta.html
移動端UC /QQ 瀏覽器的部分私人Meta 屬性