最近接到乙個 h5 的活，乍一看挺簡單的，做起來就不是那麼回事了。
接下來說說我的踩坑之路。 1
、頁面裡面要求有一條會自動延長的不規則曲線，就如這樣。
開始我一聽甲方說要這種效果，我是不敢接這個活的。大家應該都知道，這條曲線如果用canvas或者svg畫出來，不得一年也得半載，這是會出人命的！好在我問了下我們之前公司的 ui 小姐姐，她就回了我一句話： ease！畫個 gif 圖就好了！
於是乎以為這個最難的問題都解決了，剩下的都好說了。。。哈哈哈2、
①豎屏頁面改橫屏頁面的開始
第乙個念頭就是transform: rotate(90deg)，嗯，頁面是橫過來了。當時用的 rem 布局，按理說橫過來之後，應該是佔滿全屏的，可結果並不是這樣，無論我把高調成100%，還是寬調成100%，都佔不滿全屏。只能去google了。發現transform: rotate(90deg)不是這麼直接寫進去的。而是這樣：
css檔案：
//需要用到**查詢
// screen 彩屏裝置
@media screen and (orientation: portrait)
}js檔案：
var oa = document.getelementsbytagname('audio')[0];
function audioautoplay(),false); }
audioautoplay()②
//在標籤中加入 `loop` 對 ios 無效，只能通過以下的事件監聽進行彌補
var oa = document.getelementsbytagname('audio')[0];
function init(){
oa.addeventlistener('ended',loopaudio,false);
function loopaudio(){
oa.play();
最後這個問題，也算是個大問題了。前提：我並沒有在 js 中寫入任何的本地儲存。
最後一次增加了一張，結果上傳至伺服器的時候把名字給寫錯乙個字母，導致載入不出來。後來把路徑更改之後，再次用之前開啟過該頁面的手機瀏覽時，發現依舊沒有載入出來，然而電腦就可以。各種找原因啊，這是為啥呢？
當時我想可能是快取的問題吧，就把手機重啟了，結果還是載入不出來。後來換個手機，一切正常。然後我手動清理手機快取之後，一切正常了。
1.jpg?rand=<?php echo rand(1000,50000); ?>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是強大的抓包工具...