Mac聯機調試移動端頁面方法 和 移動端IOS遇到的兼容性問題

移動端IOS遇到的兼容性問題 和 Mac聯機調試方法

• 有時候遇到一些移動端「疑難雜症」，由於移動端不方便調試，可能找不到問題點，因此常常須要電腦端和移動端聯機調試，這個聯機方法記錄一下。
• 平時的移動端業務開發中，到最後總會發現一些IOS兼容性問題，這裏就把本身遇到的問題記下來，避免未來再踩坑吧

Mac聯機調試移動端頁面方法

• 1.打開Mac的Safari瀏覽器，點擊偏好設置

屏幕快照 2018-11-29 08.53.26.png

• 2.點擊「高級」一欄最下方 --> 勾選「在菜單中顯示'開發'菜單」

• 3.最後把 iPhone 或者 iPad 經過數據線連接 Mac 電腦，點擊屏幕頂部的「開發」菜單

• 4.若是順利，應該「開發」菜單裏能夠看到iPad或者iPhone的信息，若是你在移動端有打開網頁，點擊就能喚出一個Safari瀏覽器的控制檯調試器

注意：移動端和網頁端的頁面都用Safari瀏覽器打開

屏幕快照 2018-11-29 09.30.59.png

使用方法就跟PC端的調試器相似

移動端IOS遇到的兼容性問題

IOS兼容性問題

1.使用微信內置地圖查看位置接口openLocation，Android系統能正常打開地圖，IOS提示invalid coordinate

經緯度必須用浮點型，傳字符串會報錯,在地圖業務遇到的

2.overflow:auto 滑動卡頓

這個比較常見，添加 -webkit-overflow-scrolling: touch;

啓動硬件加速，因此滑動會變流暢。

對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模塊使用。

3.移動端focus失效

https://segmentfault.com/q/10...

• 需求1：點擊一個button，讓某一個input聚焦並彈出虛擬鍵盤。（能夠實現）
• 需求2：頁面記載時，自動focus，並彈出虛擬鍵盤 （沒法實現）

需求1：

在button的click裏，調用input.focus

this.$refs.btn.addEventListener('click',() => {
    this.$refs.inputDom.focus()
})

需求2：

iOS是不支持你用js編程的方式調用focus的，若是沒有事件就不能聚焦

因此設置autofocus="autofocus"沒用；

直接在頁面加載時，調用input.focus()也沒有用，由於這屬於js編程的方式聚焦。

那麼，咱們想想，若是必需要觸發事件的話，咱們想需求1的作法同樣，在頁面加載時，直接調用btn.click。模擬用戶點擊button的行爲，來觸發input的聚焦行不行呢？

this.$refs.btn.addEventListener('click',() => {
    this.$refs.inputDom.focus()
})
this.$refs.btn.click()

實踐的結果是不行，這是在三個平臺的表現狀況：

• PC端： 能夠聚焦，不會彈出虛擬鍵盤，（固然原本也沒有小鍵盤）。
• 安卓： 能夠聚焦，可是不會彈出虛擬鍵盤 （說明安卓機的表現也是異常的）
• IOS： 沒法聚焦，也不會彈出虛擬鍵盤

因此個人這邊的實踐結論是，若是但願在頁面初始化過程當中，讓input自動聚焦並彈出虛擬鍵盤。這個需求是無法是作的。 （寫出來是我的分享，若是我說的不對，必定留言哈，感謝）

4.移動端軟鍵盤，「換行」轉「搜索」

<form action="javascript:return true">
    <input  ref="inputDom" type="search"  placeholder="搜索" v-model="searchValue" @keypress="keypress" />
</form>

須要用form包裹，而且設置action
直接設置type="search"的話，安卓能夠正常顯示,IOS沒有效果

5.iOS上的固定定位有bug

iOS上使用position:fixed可能有問題

我如今是避免使用fixed，有其餘佈局或者用absolute

6.iOS中input鍵盤事件keyup、keydown、keypress支持不是很好

用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是能夠的，可是在ios手機瀏覽器中用輸入法輸入以後，並未馬上相應keyup事件，只有在經過刪除以後才能夠響應

這個我是經過換input事件來處理

7.點擊iOS上input框，不彈出虛擬鍵盤

若是僅僅是不彈出鍵盤的話

• 在focus事件中document.activeElement.blur()
• 或者設置readonly

我這個需求是但願聚焦，同時不要彈出虛擬鍵盤。最後改用組件庫vant裏的組件來作了。

8.移動端點擊300ms延遲 和 移動端點透問題

低版本瀏覽器用faskclick就行，高版本瀏覽器取消300ms延遲了

https://github.com/ftlabs/fas...

https://juejin.im/post/5b3cc9...