移動端開發(fā)IOS 6PLUS中表單輸入造成的頁面高度縮小bug

jokester 發(fā)布于2019-08-30 15:43 / 1786人閱讀

摘要：出現(xiàn)的地方就是在上滑塊無法拖動，經(jīng)過檢測發(fā)現(xiàn)是在上有這個問題。彈窗是通過定位在頁面上的。當表單激活的時候，由于手機自帶的輸入法彈起造成頁面向上滾動，會隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。

先說下業(yè)務(wù)邏輯：登錄頁面，滑塊驗證，手機號碼輸入完成以后，會有一個滑塊驗證，驗證正確則會收到短信驗證碼。這就是這個登錄頁面的基本邏輯。

出現(xiàn)bug的地方就是在IOS上滑塊無法拖動，經(jīng)過檢測發(fā)現(xiàn)是在6plus上有這個問題。
1.彈窗是通過fixed定位在頁面上的。
2.當表單激活的時候，由于手機自帶的輸入法彈起造成頁面向上滾動，會隱藏頁面頂部一部分。
此時造成頁面頂部缺失一部分，所以fixed定位的實際top距離也跟著改變，造成拖拽的滑塊位置偏移到文字位置。類似于第四張圖的效果，黃色部分缺失。

解決方法：通過input的focus事件改變body的scrollTop值為0。

$("input").focus(function () {
    console.log($("body").scrollTop())
    document.documentElement.scrollTop=0;
    document.body.scrollTop=0;
})

記錄一下開發(fā)終于到的問題。

GPU云服務(wù)器云服務(wù)器移動端頁面移動端頁面顯示移動端html頁面移動端開發(fā)

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

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

相關(guān)文章

移動端開發(fā)IOS 6PLUS中表單輸入造成的頁面高度縮小bug

摘要：出現(xiàn)的地方就是在上滑塊無法拖動，經(jīng)過檢測發(fā)現(xiàn)是在上有這個問題。彈窗是通過定位在頁面上的。當表單激活的時候，由于手機自帶的輸入法彈起造成頁面向上滾動，會隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。先說下業(yè)務(wù)邏輯：登錄頁面，滑塊驗證，手機號碼輸入完成以后，會有一個滑塊驗證，驗證正確則會收到短信驗證碼。這就是這個登錄頁面的基本邏輯。 showImg(http...

nevermind 2019-08-02 16:11 評論0 收藏0
移動端開發(fā)IOS 6PLUS中表單輸入造成的頁面高度縮小bug

摘要：出現(xiàn)的地方就是在上滑塊無法拖動，經(jīng)過檢測發(fā)現(xiàn)是在上有這個問題。彈窗是通過定位在頁面上的。當表單激活的時候，由于手機自帶的輸入法彈起造成頁面向上滾動，會隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。先說下業(yè)務(wù)邏輯：登錄頁面，滑塊驗證，手機號碼輸入完成以后，會有一個滑塊驗證，驗證正確則會收到短信驗證碼。這就是這個登錄頁面的基本邏輯。 showImg(http...

guqiu 2019-08-23 16:45 評論0 收藏0
第六天移動端Web開發(fā)注意事項

摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。隨著移動互聯(lián)網(wǎng)的發(fā)展，移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0
第六天移動端Web開發(fā)注意事項

摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。隨著移動互聯(lián)網(wǎng)的發(fā)展，移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...

xbynet 2019-08-01 15:58 評論0 收藏0
H5項目常見問題匯總及解決方案

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點個變?yōu)閭€。原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎(chǔ)知識： H5頁面窗口自動調(diào)整到設(shè)備...

marser 2019-08-20 14:08 評論0 收藏0