資訊專欄INFORMATION COLUMN
摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機的表現也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。
移動端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
直接設置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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99535.html
摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據具體的環境再選擇更為合適的調試方法。 本文首次發表于本人的個人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言 在開發中前端免不了要進行移動端的開發，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態欄和底部的菜單欄，特別是在qq內置瀏覽器中打開，差...
摘要：博主之前已經推薦了一款神器下面，就總結一下移動端遇見的坑。解決原理虛擬鍵盤彈出時將元素設置為，虛擬鍵盤消失時候設置回來。解決方案由于虛擬鍵盤出現并未拋出事件，而檢測或者事件，皆會有一定延遲，會出現閃爍現象。 做過很多移動端的項目，在開發調試過程中，一款好的調試工具會讓效率大大提高。博主之前已經推薦了一款神器：http://web.jobbole.com/87587/ 下面，就總結一下移...
摘要：移動端調試困難很多時候，我們在進行移動端開發時，都是先在端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。 移動端調試困難 很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏可視化...
閱讀 2034·2021-11-11 16:54
閱讀 2111·2019-08-30 15:55
閱讀 3610·2019-08-30 15:54
閱讀 390·2019-08-30 15:44
閱讀 2227·2019-08-30 10:58
閱讀 423·2019-08-26 10:30
閱讀 3047·2019-08-23 14:46
閱讀 3191·2019-08-23 13:46
