H5常見細節問題

2022-07-15 21:06:08 字數 932 閱讀 4034

結合工作中**量的積累以及測試童鞋反饋的優化或bug,記錄和總結常見問題:

一、fixed定位的問題

當頁面總體布局出現頭尾fixed後,輸入框獲取焦點時,會出現頁面排版錯亂。

養成乙個好的習慣:用absolute代替,最外層放乙個全屏盒子,中間可以分成三個absolute的盒子,內容放在中間盒子。如有彈出層,則寫在最外層盒子裡面。

在需要相容到ie678的pc頁面也可以用這種方式。

初始化頁面時document.getelementsbytagname('body')[0].addeventlistener('touchmove',function(e),false);

去除body的滑動事件。

三、不同解析度下相容性問題,一般指相容ipad  phone

採用rem定位,包括除邊框外的px定位全轉換成rem。

如ui設計圖是750px寬,則將html標籤的字型大小設定為屏寬除以7.5;

function setrootfontsize()

$(window).on('load resize',setrootfontsize);

如此後設計圖上的100px寬的圖,就是1rem寬。30px的間隔就是0.3rem,類推。

需要設定的是width,height,line-height,padding,margin,font-size,border-radius等

四、為什麼邊框1px感覺太寬了

所有需要細邊框的元素,應該有個邊框的class

underline

:after

五、css向右鍵頭

.icon-arrow:after

六、瀏覽器會預設有幾個畫素的邊距,應該初始化*

七、控制項注意事項

input   type="tel"呼叫數字按鍵

寫完要寫常用驗證,maxlength

//todo

H5問題總結

很多時候設計稿中的icon很小,但是實際製作頁面時,如果這個icon可操作,icon的可操作域應該做大一些,不然在裝置中會經常發生操作之後沒反應 其實是沒有觸發在操作域上 少掉坑,h5建議 0.很多時候設計稿中的icon很小,但是實際製作頁面時,如果這個icon可操作,icon的可操作域應該做大一些...

H5頁面常見開發問題總結

摘要 常見的通用的h5開發問題 ios端 h5開發問題 輸入法隱藏頁面留白 問題現象 ios端軟鍵盤失去焦點 隱藏 後,頁面不會回彈,頁面下方會留下輸入法塊的白色塊。暴力解決方案 軟鍵盤收起 隱藏 後,滾動一下頁面,頁面中的留白塊塊就會消失。所以只要在輸入完畢後實現一下 滾動 的操作就可以解決問題。...

H5開發問題總結

local 和session 都無法直接訪問物件,當你定義乙個 json 以後 通過setitem 和getiem 後發現無法正常使用,應為local session 都是支援字串的訪問,所以這是需要兩個步驟第一就是在存的時候吧json 轉化成字串,當取出的時候再把字串解析成json 例如 var ...