1.min-height的繼承問題
這不是一個h5的問題,但是也是在這次中正好遇到的。
你也許會給一個元素一個 min-height,然后你會發(fā)現(xiàn)他的子元素在大部分瀏覽器——而且是現(xiàn)代瀏覽器——卻不能再繼承它了。
也就是父子元素都用了min-height:100%,子元素會得不到預(yù)期的高度。
你也有很多種解決方法,比如在用min-height:100%的同時加一個 height:1px,或者用js動態(tài)的去加。
但是前者當(dāng)你元素本身存在overflow:hidden的時候,會抵消到滾動條,后者有效率問題,而且會閃一下。
所以我推薦另一種方法,當(dāng)你不用去顧慮低版本瀏覽器,比如在h5上面時。
把父元素的display設(shè)定為table,子元素的當(dāng)然是設(shè)定為table-cell。 這樣子元素就會自動填充滿父元素,而父元素你就可以正常的用min-height了。
2.click事件,模擬器上都沒問題,但是手機(jī)上就是不觸發(fā)
也許是為了性能考慮吧,手機(jī)上不會去主動的監(jiān)聽click之類的事件,你需要在監(jiān)聽的dom上css,cursor:pointer
3.瀏覽器后退不刷新
這種情況是以前遇到的,這里也再說一下。
主要會發(fā)生在webview里多一點(diǎn)。當(dāng)你點(diǎn)擊后退時候,頁面是以緩存形式出現(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判斷頁面是否從緩存中讀出,利用這兩個屬性就可以很好地完成我們的要求。