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


<meta name="format-detection" content ="telephone=no"/>  

格式檢測 禁止識別我們頁面中的數字,防止把其當作電話識別,email=no 禁止識別郵箱

IOS設備對META的私有屬性

<meta name="apple-mobile-web-app-capable" content="yes">

     把蘋果手機safari上打開我們的頁面,把菜單隱藏顯示全屏  網站開啟對web app的支持

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

  • 在web app應用下狀態條(屏幕頂部條)的顏色;
  • 默認值為default(白色),可以定為black(黑色)和black-translucent(灰色半透明)
  • 若值為“black-translucent”將會占據頁面px位置,浮在頁面上方(會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px)。

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 瀏覽器。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM