成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Mac聯(lián)機調(diào)試移動端頁面方法 和 移動端IOS遇到的兼容性問題

CoreDump / 3312人閱讀

摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機的表現(xiàn)也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結(jié)論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。

移動端IOS遇到的兼容性問題 和 Mac聯(lián)機調(diào)試方法

有時候遇到一些移動端「疑難雜癥」，因為移動端不方便調(diào)試，可能找不到問題點，所以經(jīng)常需要電腦端和移動端聯(lián)機調(diào)試，這個聯(lián)機方法記錄一下。

平時的移動端業(yè)務(wù)開發(fā)中，到最后總會發(fā)現(xiàn)一些IOS兼容性問題，這里就把自己遇到的問題記下來，避免將來再踩坑吧

Mac聯(lián)機調(diào)試移動端頁面方法

1.打開Mac的Safari瀏覽器，點擊偏好設(shè)置

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

2.點擊「高級」一欄最下方 --> 勾選「在菜單中顯示"開發(fā)"菜單」

3.最后把 iPhone 或者 iPad 通過數(shù)據(jù)線鏈接 Mac 電腦，點擊屏幕頂部的「開發(fā)」菜單

4.如果順利，應(yīng)該「開發(fā)」菜單里可以看到iPad或者iPhone的信息，如果你在移動端有打開網(wǎng)頁，點擊就能喚出一個Safari瀏覽器的控制臺調(diào)試器

注意：移動端和網(wǎng)頁端的頁面都用Safari瀏覽器打開

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

使用方法就跟PC端的調(diào)試器類似

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

IOS兼容性問題

1.使用微信內(nèi)置地圖查看位置接口openLocation，Android系統(tǒng)能正常打開地圖，IOS提示invalid coordinate

經(jīng)緯度必須用浮點型，傳字符串會報錯,在地圖業(yè)務(wù)遇到的

2.overflow:auto 滑動卡頓

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

啟動硬件加速，所以滑動會變流暢。

對于有-webkit-overflow-scrolling的網(wǎng)頁，會創(chuàng)建一個UIScrollView，提供子layer給渲染模塊使用。

3.移動端focus失效

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

需求1：點擊一個button，讓某一個input聚焦并彈出虛擬鍵盤。（可以實現(xiàn)）

需求2：頁面記載時，自動focus，并彈出虛擬鍵盤 （無法實現(xiàn)）

需求1：

在button的click里，調(diào)用input.focus

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

需求2：

iOS是不支持你用js編程的方式調(diào)用focus的，如果沒有事件就不能聚焦

所以設(shè)置autofocus="autofocus"沒用；

直接在頁面加載時，調(diào)用input.focus()也沒有用，因為這屬于js編程的方式聚焦。

那么，我們想一想，如果必須要觸發(fā)事件的話，我們想需求1的做法一樣，在頁面加載時，直接調(diào)用btn.click。模擬用戶點擊button的行為，來觸發(fā)input的聚焦行不行呢？

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

實踐的結(jié)果是不行，這是在三個平臺的表現(xiàn)情況：

PC端： 可以聚焦，不會彈出虛擬鍵盤，（當(dāng)然本來也沒有小鍵盤）。

安卓： 可以聚焦，但是不會彈出虛擬鍵盤 （說明安卓機的表現(xiàn)也是異常的）

IOS： 無法聚焦，也不會彈出虛擬鍵盤

所以我的這邊的實踐結(jié)論是，如果希望在頁面初始化過程中，讓input自動聚焦并彈出虛擬鍵盤。這個需求是沒法是做的。 （寫出來是個人分享，如果我說的不對，一定留言哈，感謝）

4.移動端軟鍵盤，「換行」轉(zhuǎn)「搜索」

需要用form包裹，并且設(shè)置action
直接設(shè)置type="search"的話，安卓可以正常顯示,IOS沒有效果

5.iOS上的固定定位有bug

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

我現(xiàn)在是避免使用fixed，有其他布局或者用absolute

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

用input監(jiān)聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才可以響應(yīng)

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

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

如果僅僅是不彈出鍵盤的話

在focus事件中document.activeElement.blur()

或者設(shè)置readonly

我這個需求是希望聚焦，同時不要彈出虛擬鍵盤。最后改用組件庫vant里的組件來做了。

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99535.html

相關(guān)文章

  • 移動端真機調(diào)試實戰(zhàn)經(jīng)驗

    摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據(jù)具體的環(huán)境再選擇更為合適的調(diào)試方法。 本文首次發(fā)表于本人的個人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言 在開發(fā)中前端免不了要進行移動端的開發(fā)，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態(tài)欄和底部的菜單欄，特別是在qq內(nèi)置瀏覽器中打開，差...

    rainyang 評論0 收藏0

  • 總結(jié)移動開發(fā)實踐中遇到的坑

    摘要：博主之前已經(jīng)推薦了一款神器下面，就總結(jié)一下移動端遇見的坑。解決原理虛擬鍵盤彈出時將元素設(shè)置為，虛擬鍵盤消失時候設(shè)置回來。解決方案由于虛擬鍵盤出現(xiàn)并未拋出事件，而檢測或者事件，皆會有一定延遲，會出現(xiàn)閃爍現(xiàn)象。 做過很多移動端的項目，在開發(fā)調(diào)試過程中，一款好的調(diào)試工具會讓效率大大提高。博主之前已經(jīng)推薦了一款神器：http://web.jobbole.com/87587/ 下面，就總結(jié)一下移...

    rockswang 評論0 收藏0

  • 9102了，你還不會移動端真機調(diào)試？

    摘要：移動端調(diào)試?yán)щy很多時候，我們在進行移動端開發(fā)時，都是先在端使用手機模擬器進行調(diào)試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現(xiàn)問題，皆大歡喜。 移動端調(diào)試?yán)щy 很多時候，我們在進行移動端開發(fā)時，都是先在PC端使用手機模擬器進行調(diào)試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現(xiàn)問題，皆大歡喜。但是一旦出現(xiàn)問題，我們就很難解決，因為缺乏可視化...

    lushan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<