H5問題總結

2021-07-22 07:38:46 字數 1822 閱讀 7191

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

少掉坑,h5建議

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

1.設計稿中input輸入型元素出現在頁面上部,保證軟鍵盤彈出時不會覆蓋input,防止頁面被鍵盤頂上去而出現的各種坑。可以設計成多頁表單。

2.定位盡量避免不要使用

fixed

方式,因為手機系統和瀏覽器的支援差異,會有很多坑需要埋。

當login_wrap的內容不足填充height:100%時,footer_box是固定高度固定在底部的容器,其樣式最好採用如下方式:

.login_wrap_box

.login_wrap

.footer_box

這樣頁面高度固定一直,不會因為彈出軟體盤改變可視視窗高度而引起的底部。

如果還是不行,只能用js暴力解決:

var wh=$(window).height();

$(window).on("resize",function());

}else);

}});

// 解決fixed被鍵盤擠上去的問題

setinterval(function()

if ($(window).height() >= currentwinheight)

}, 100);

3.input中內容垂直居中,最好用height + vertical-align: middle;的方式,用height+line-heigh的方式,某些手機瀏覽器可能出現input中無內容時游標上偏的問題。

搜尋鍵盤與事件繫結

input type="search"即可呼叫搜尋鍵盤

但是有時候鍵盤回車鍵並不一定具有「搜尋」或「前往」字樣,需要將input包裹在form中,有時還需要填上action屬性(仍然不是所有有效)。

回車鍵事件使用submit。為了防止表單提交時自動重新整理頁面,js事件中需要組織預設事件:return false。

另外,如果要移除搜尋框的叉叉圖示,可以設定樣式

::-webkit-search-cancel-button

input 常用的type型別:

text checkbox radio number submit hiddle password reset

h5新物件

:number 

email url tel search date time manth week datetime (有些type ios似乎已不支援,自行查閱

自動彈出鍵盤

其實彈出鍵盤很容易,當輸入框聚焦的時候,鍵盤就會彈出。

但是很多情況下,會發現鍵盤彈出後有隱藏了,這時設定乙個延遲聚焦即可解決此問題。

ios似乎還是存在問題,可以試試使用click事件觸發focus(),如果不行,我覺得也不必糾結這個小細節。

H5開發問題總結

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

h5拖動總結

1.拖動神器sortablejs sortablejs 有vue,angular,react 版的實現 vue版 通過options 可以完全使用 sortable的配置 2.vue grid layout 拖動事件使用 interactjs 來實現的。可以實現在容器內拖動 自由碰撞,碰撞原理是 使...

H5直播開發總結

關於直播,有很多相關技術文章,這裡不多說。作為前端,我們比較關心我們所需要的。直播的大致流程 但實際我們需要處理一些不可控的情況,這是非常麻煩的。比如說,直播方網路不好,直播方關閉了攝像頭,這些情況都會導致推流斷掉,在文章後面,我們詳細說這一塊。目前我們先考慮直播的三種狀態 直播前,直播中,結束。針...