1.min-height的繼承問題
這不是一個h5的問題馋袜,但是也是在這次中正好遇到的黔攒。
你也許會給一個元素一個 min-height趁啸,然后你會發(fā)現(xiàn)他的子元素在大部分瀏覽器——而且是現(xiàn)代瀏覽器——卻不能再繼承它了。
也就是父子元素都用了min-height:100%督惰,子元素會得不到預(yù)期的高度不傅。
你也有很多種解決方法,比如在用min-height:100%的同時加一個 height:1px赏胚,或者用js動態(tài)的去加访娶。
但是前者當你元素本身存在overflow:hidden的時候,會抵消到滾動條栅哀,后者有效率問題震肮,而且會閃一下称龙。
所以我推薦另一種方法,當你不用去顧慮低版本瀏覽器戳晌,比如在h5上面時鲫尊。
把父元素的display設(shè)定為table,子元素的當然是設(shè)定為table-cell沦偎。 這樣子元素就會自動填充滿父元素疫向,而父元素你就可以正常的用min-height了。
2.click事件豪嚎,模擬器上都沒問題搔驼,但是手機上就是不觸發(fā)
也許是為了性能考慮吧,手機上不會去主動的監(jiān)聽click之類的事件侈询,你需要在監(jiān)聽的dom上css舌涨,cursor:pointer
3.瀏覽器后退不刷新
這種情況是以前遇到的,這里也再說一下扔字。
主要會發(fā)生在webview里多一點囊嘉。當你點擊后退時候,頁面是以緩存形式出現(xiàn)的革为,而不是刷新后的扭粱。很多情況下這不是你預(yù)期的效果。
解決方法是用js:
window.onpageshow =function(evt){
// If persisted then it is in the page cache, force a reload of the page.
if(evt.persisted){
document.body.style.display ="none";
location.reload();
}
};
onpageshow每次頁面加載都會觸發(fā)震檩,無論是從緩存中加載還是正常加載琢蛤。這是他和onload的區(qū)別
persisted判斷頁面是否從緩存中讀出,利用這兩個屬性就可以很好地完成我們的要求抛虏。