移動端h5頁面常見問題總結
阿新 • • 發佈：2017-09-16
webkit style 總結 mar 常見問題 就會 所有 真的 abs
從去年開始在公司一直做嵌入式的h5頁面，遇見了很多問題，做一個小小的總結~
1.IOS設備鏈接、按鈕等點擊產生灰色背景
在傲嬌的iOS中可點擊元素被點擊時候會出現覆蓋顯示的高亮顏色，也就是一個灰色的陰影，特別難看，尤其是在元素占地面積還比較大的時候。這個可以通過
-webkit-tab-highlight-color
這個css屬性來設置，你可以改成任何你想要的顏色，也可以去掉。
-webkit-tab-highlight-color:rgba(0,0,0,0);
//去掉背景高亮
-webkit-tab-highlight-color: red;
//設置背景高亮的顏色
2.ios設備微信瀏覽器或者Safari中fixed定位的部分會跟隨滑動跳動
什麽叫跳動，就是你上滑的fixed定位的部分會跟著你一起上滑，滑動結束的時候又會彈回到定位的位置，領導看見了也沒罵我，一本正經跟我講，你這個效果有點炫啊，用戶體驗滿分，（手動尷尬）。。。
根據我（用戶體驗滿分）的經驗，移動端盡量不要用fixed定位，在ios中會出現很多亂七八糟的效果，比如令人痛心疾首的鍵盤彈出，就會給你頂個底朝天！那怎麽解決呢，產品經（jian）理（ren）的效果還是要實現呀，我目前覺得最好的解決辦法就是全部使用position:absolute（歡迎探討）
一般h5頁面常用布局都差不多是這樣
那怎麽用absolute實現fixed的效果呢，好，老夫開始炫技了#_#
1 //首先是html 2 <body> 3 <div class=‘header‘>header</div> 4 <div class=‘main‘>main</div> 5 <div class=‘footer‘>footer</div> 6 </body>
//css .header{ width:100%; height:100px; position:absolute; left:0; top:0; } .footer{ width:100%; height:100px; position:absolute; left:0; bottom:0; } .main{ width:100%; position:absolute; left:0; right:0; top:100px; bottom:100px; //這兩句是關鍵 }
所有的滑動部分就放在中間的main中，完美，-_-#
這樣用的是很爽，但是很多小夥伴試了之後肯定又被產品懟了，你這個滑動效果不行啊，怎麽有時候一卡一卡的！不可能，老夫寫的東西怎麽會.....額，還真的一卡一卡的...
怎麽才能像原生一般絲滑呢？？？就有另外一個css屬性了
-webkit-overflow-scrolling
-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 */ -webkit-overflow-scrolling: auto; /* 當手指從觸摸屏上移開，滾動會立即停止 */
當然是選擇 -webkit-overflow-scrolling: touch; 就是這麽絲滑~
先寫到這裏吧，剩下的就下一篇吧......
移動端h5頁面常見問題總結