前端-移動端h5常用屬性
阿新 • • 發佈:2019-01-07
用了好久的apple的一些meta屬性,突然想到怎麼沒看見像UC、QQ瀏覽器的,於是問了度娘,還真的是有。移動端裝置主要是iOS和Android兩類,從使用者量來看,Safari、UC、QQ是較多的3款瀏覽器了,因此整理了下移動web開發常用和3種瀏覽器的私有meta屬性。
1.常用屬性
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">
- ‘viewport’
設定顯示方式,一般適配移動裝置用來避免縮放和影響體驗的滾動條
width=device-width:寬度為裝置寬度
initial-scale: 初始的縮放比例 (範圍從>0到 10 )
minimum-scale: 允許使用者縮放到的最小比例
maximum-scale: 允許使用者縮放到的最大比例
user-scalable: 使用者是否可以手動縮放 - ‘format-detection’
忽略頁面對手機號、email的識別
telephone:yes|no
email:yes|no
2.Safari瀏覽器私有meta屬性
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="APP name">
- ‘apple-mobile-web-app-capable’
隱藏瀏覽器的位址列和toolbar,頁面顯示為全屏,不加此meta則預設顯示位址列和toolbar
content:yes|no - ‘apple-mobile-web-app-status-bar-style’
content:default|black| black-translucent,即白色、黑色、灰色半透明 - ‘apple-mobile-web-app-title’
新增到主屏後的標題
3.UC瀏覽器私有meta屬性
<meta name="screen-orientation" content="landscape">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="layoutmode" content="fitscreen">
<meta name="nightmode" content="disable">
<meta name="imagemode" content="force">
- ‘screen-orientation’螢幕方向
強制頁面橫屏或豎屏顯示
content:landscape|portrait - ‘full-screen’全屏
進入全屏後,頁面隱藏選單欄, 生成一個懸浮標, 點選懸浮標可顯示選單欄 - ‘browsermode’應用模式
應用模式是為方便 web 應用及遊戲開發者設定的綜合開關,通過 meta 標籤進行指示開啟,當進入應用模式時,長按選單、預設手勢、夜間模式失效 - ‘layoutmode’排版模式
UC 瀏覽器供適屏模式及標準模式,其中適屏模式簡化了一些頁面的處理,使得頁面內容更適合進行頁面閱讀、節省流量及響應更快。而標準模式則能按照標準規範對頁面進行排版及渲染。
content:fitscreen|standard - ‘nightmode’禁用夜間模式
禁止頁面使用 UC 瀏覽器自定義的夜間模式 - ‘imagemode’強制圖片顯示
為了節省流量及加快速度,通過強制圖片顯示的功能可以保證圖片顯示不受使用者的設定影響。
4.QQ瀏覽器私有meta屬性
<meta name="x5-orientation" content="landscape">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="default">
- ‘x5-orientation’橫豎屏控制
強制橫/豎屏以及跟隨瀏覽器設定【預設】
content:landscape|portrait|auto - ‘x5-fullscreen’全屏控制
強制全屏以及跟隨瀏覽器設定【預設】
content:true|auto - ‘x5-page-mode’ 頁面模式
普通瀏覽模式【預設】以及網頁應用模式(定製工具欄,全屏顯示)
content:default|app