前端 移動端h5常用屬性

2022-08-27 01:03:11 字數 1050 閱讀 6175

『viewport』 

設定顯示方式,一般適配移動裝置用來避免縮放和影響體驗的滾動條 

width=device-width:寬度為裝置寬度 

initial-scale: 初始的縮放比例 (範圍從》0到 10 ) 

minimum-scale: 允許使用者縮放到的最小比例 

maximum-scale: 允許使用者縮放到的最大比例 

user-scalable: 使用者是否可以手動縮放

『format-detection』 

忽略頁面對手機號、email的識別 

telephone:yes|no 

email:yes|no

『screen-orientation』螢幕方向 

強制頁面橫屏或豎屏顯示 

content:landscape|portrait

『full-screen』全屏 

進入全屏後,頁面隱藏選單欄, 生成乙個懸浮標, 點選懸浮標可顯示選單欄

『browsermode』應用模式 

應用模式是為方便 web 應用及遊戲開發者設定的綜合開關,通過 meta 標籤進行指示開啟,當進入應用模式時,長按選單、預設手勢、夜間模式失效

『layoutmode』排版模式 

uc 瀏覽器供適屏模式及標準模式,其中適屏模式簡化了一些頁面的處理,使得頁面內容更適合進行頁面閱讀、節省流量及響應更快。而標準模式則能按照標準規範對頁面進行排版及渲染。 

content:fitscreen|standard

『nightmode』禁用夜間模式 

禁止頁面使用 uc 瀏覽器自定義的夜間模式

『imagemode』強制顯示 

為了節省流量及加快速度,通過強制顯示的功能可以保證顯示不受使用者的設定影響。

『x5-orientation』橫豎屏控制 

強制橫/豎屏以及跟隨瀏覽器設定【預設】 

content:landscape|portrait|auto

『x5-fullscreen』全屏控制 

強制全屏以及跟隨瀏覽器設定【預設】 

content:true|auto

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...

移動端h5優化

1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...

移動端H5除錯

背景 開發pc頁面的時候使用chrome瀏覽器的開發者工具,可以很容易的捕獲到頁面的dom元素,並且可以修改樣式,方便除錯 但是手機上卻很麻煩,因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到pc,使用pc的開發者工具檢測。fiddler抓包工具 fiddler是強大的抓包工具...