成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

CoreDump / 3206人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

移動(dòng)端IOS遇到的兼容性問題

IOS兼容性問題

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

經(jīng)緯度必須用浮點(diǎn)型，傳字符串會(huì)報(bào)錯(cuò),在地圖業(yè)務(wù)遇到的

2.overflow:auto 滑動(dòng)卡頓

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

啟動(dòng)硬件加速，所以滑動(dòng)會(huì)變流暢。

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

3.移動(dòng)端focus失效

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

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

需求2：頁面記載時(shí)，自動(dòng)focus，并彈出虛擬鍵盤 （無法實(shí)現(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"沒用；

直接在頁面加載時(shí)，調(diào)用input.focus()也沒有用，因?yàn)檫@屬于js編程的方式聚焦。

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

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

實(shí)踐的結(jié)果是不行，這是在三個(gè)平臺(tái)的表現(xiàn)情況：

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

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

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

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

4.移動(dòng)端軟鍵盤，「換行」轉(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事件，在安卓手機(jī)瀏覽器中是可以的，但是在ios手機(jī)瀏覽器中用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才可以響應(yīng)

這個(gè)我是通過換input事件來處理

7.點(diǎn)擊iOS上input框，不彈出虛擬鍵盤

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

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

或者設(shè)置readonly

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

8.移動(dòng)端點(diǎn)擊300ms延遲 和 移動(dòng)端點(diǎn)透問題

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

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

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

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

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

相關(guān)文章

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

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

    rainyang 評論0 收藏0

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

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

    rockswang 評論0 收藏0

  • 9102了，你還不會(huì)移動(dòng)端真機(jī)調(diào)試？

    摘要：移動(dòng)端調(diào)試?yán)щy很多時(shí)候，我們在進(jìn)行移動(dòng)端開發(fā)時(shí)，都是先在端使用手機(jī)模擬器進(jìn)行調(diào)試，沒有問題后，我們才會(huì)在手機(jī)端的瀏覽器進(jìn)行測試，這個(gè)時(shí)候，如果沒有出現(xiàn)問題，皆大歡喜。 移動(dòng)端調(diào)試?yán)щy 很多時(shí)候，我們在進(jìn)行移動(dòng)端開發(fā)時(shí)，都是先在PC端使用手機(jī)模擬器進(jìn)行調(diào)試，沒有問題后，我們才會(huì)在手機(jī)端的瀏覽器進(jìn)行測試，這個(gè)時(shí)候，如果沒有出現(xiàn)問題，皆大歡喜。但是一旦出現(xiàn)問題，我們就很難解決，因?yàn)槿狈梢暬?..

    lushan 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<