移動端的適配坑(一)

2022-08-11 20:42:18 字數 686 閱讀 8924

1.   background ;  在vue的環境下  有的安卓手機背景圖 顯示不出來!!!     

原因: vue-cli配置原因

2.  高度不一致的各種問題  ,   樣式沒有reset 導致的

3. 用flexible定義rem的時候

if (width / dpr > 540)

上面的**會導致視口超過540  高度什麼的開始不適配了

4. vue專案 有些安卓機白屏  解決方法: 加入babel-polifill

5.  vue專案  偶爾出現返回白屏 

html, body

但是 這個因為我用了mint-ui的下拉載入  如果加這段** 會導致沒有下拉載入 就把資料請求完  所以 這個目前還待解決

6. date日期 用  2018-12-01的格式在ios裡顯示的是nan   

在ios裡要用  2018/12/10這樣的格式就可以成功顯示

7. 我們都知道 vue檔案 打包完直接扔伺服器就可以了  但是有時候需要放本地直接訪問   這時候只要

config/index.js     assetpublic的『/』改為『./』    productionsourcemap 為false

route不要配置  mode:history

8. 根據**特性執行不同的css

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

不論裝置寬度是多少,統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大,都看作375px。width只能改變布局視口,不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...

移動端適配

無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...