關於移動端開發時iOS上滑屏卡頓的問題，以及電話類數字的樣式失控問題
寫在前面的話：
tips:寫移動的時候,那些頭部需要固定顯示在顯示屏頂部的，通常在PC端我會用fixed來寫。但是，在移動端，這並不是一個好方法，因為彈出輸入小鍵盤的時候，會造成fixed 的元素偏移掉，在這裏有兩種方法可以解決：
1.建議移動端布局采用以下方式（見正文），如果有錯誤的地方，還請指正~
2.另外還看到一篇文章提到這個問題，作者讓固定的頭部仍然采用fixed, 然後內容區也用了fixed,內容區的fixed元素這樣寫：{position:fixed;top:80px;bottom:80px;width:100%;overflow:scroll;}
我用的方法是：
html, body{ position: relative; width: 100%; height: 100%; max-width: 800px; min-width: 320px; overflow-x: hidden; overflow-y: hidden; margin: 0 auto; background: #fff; } .views { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; /* 在ios上滑屏更流暢,不信你去掉試試 */ } .g3 { width: 8.66133rem; height: 2.176rem; font-size: 0.512rem; color: #000; line-height: 0.72533rem; border: 1px solid red; overflow: hidden; }
<body> <div class="views"> <p class="g3"> 動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感動機戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核</p> <!-- 此處省略 n 個 相同的p標簽，要多到滑幾屏的長度 --> <p class="g3"> 動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感動機戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核 </p> </div> </body>
關於滑屏卡頓的問題，上面已經提到，要加上：
-webkit-overflow-scrolling: touch;
就可以了；
那電話類數字又是啥？
代碼：
樣式和上文一樣~，html如下：
<body> <div class="views"> <p class="g3"> 動機客戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核得分科技化工等客觀和登記和高科技好讀後感京東框架讀後感動機戶趕快交電話費開發將對方很高科技的化工科技和登記客戶對方更好看的恢復規劃的國際化考核 </p> <p class="g3" style="width: 100%;background: green; color: #fff;"> 動機客戶劃的國際化考核400-105-0666 </p> </div> </body>
效果圖如下：
在ios 中微信端與安卓端的效果是一樣的，如以下截圖：
點擊數字：在ios微信端不能喚起撥打，在chrome 都不能喚起撥打；在safari上點擊時會彈框說被禁止，當點擊“允許通話”時，是可以撥打的，但樣式不能忍啊……
在安卓 的QQ裏面打開不能喚起撥打，在MX4瀏覽器是可以的；
然而在 safari 上就變成了這樣：
解法：
第1步. 加一行meta 標簽：
<meta name = "format-detection" content = "telephone=no">
刷新頁面，發現在safari 上樣式正常了~~~，然而，撥打電話的功能木有了額。
第二步.把數字裝進a 標簽裏：
.tel-num{ color: #fff; }
<a href="tel:400-105-0666" class="tel-num">400-105-0666</a>
現在試試點擊吧，發現ios 端 的微信端也可以喚起撥打了，safari也可以像之前一樣點擊“允許通話”，允許撥打電話了，chrome也可以啦~
在安卓 的QQ裏面可以喚起撥打，在MX4瀏覽器仍然是可以的
原來這才是電話號碼的正確書寫方式~呃呃呃
關於移動端開發時iOS上滑屏卡頓的問題，以及電話類數字的樣式失控問題