最近使用Vue開發移動端應用,在進行ios適配時遇到了一些問題。
首先是頁面在ios設備上出現了滾動條,但是PC端和安卓設備上卻沒有,查看CSS代碼后發現并沒有設置overflow屬性為scroll或auto。最終發現是因為ios設備默認會將頁面設置為可滾動的,需要在body元素上設置以下樣式:
body { -webkit-overflow-scrolling: touch; }
第二個問題是在ios設備上,點擊某些按鈕或元素時會出現卡頓,甚至無響應的情況。經過排查發現是因為ios設備上的點擊事件觸發的速度比PC端和安卓設備慢,需要把@click事件改為@tap事件,使用Vue-touch庫即可輕松解決:
// 安裝Vue-touch npm install vue-touch@next --save // 在main.js中引入Vue-touch并注冊 import VueTouch from 'vue-touch' Vue.use(VueTouch)
以上兩個問題都是因為ios設備與其他設備的差異導致的,在開發移動端應用時要重視各種設備的適配問題,以提供更好的用戶體驗。