移動端開發(fā)踩過的坑

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判斷頁面是否從緩存中讀出,利用這兩個屬性就可以很好地完成我們的要求。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,149評論 1 92
  • 一:在制作一個Web應(yīng)用或Web站點(diǎn)的過程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,365評論 0 1
  • 千年的蘆花悠悠地飄 文/岠山劍客 (本文為系列作品“跑步遇到詩”內(nèi)容之一,更多跑步遇到詩請點(diǎn)擊:跑步遇到詩目錄) ...
    岠山劍客閱讀 237評論 4 8
  • 1 艾薇是我初中同學(xué),多年未見,有天我開車經(jīng)過淳化街的時候等紅綠燈,我東張西望突然看到了在站臺上有個很面熟的面孔,...
    白卷兒閱讀 992評論 1 3

友情鏈接更多精彩內(nèi)容