前幾天寫了一個公眾號的幾個H5界面，寫完在測試的時候，發(fā)現(xiàn)一個問題。頁面存在好幾個單選按鈕，還有輸入框，我自己的安卓手機正常測試走流程是沒有任何問題的，但是一用蘋果手機測試就出現(xiàn)了問題：蘋果手機在選擇單選按鈕之后，輸入框輸入內(nèi)容之后，再點擊提交按鈕，彈出彈出框，會發(fā)現(xiàn)背景圖底部留有空白，且彈出框上面的保存按鈕不能點擊，沒反應(yīng)，但自己滑動一下背景圖，彈出框的按鈕就可以點擊了，查了很多資料，找了一段代碼，在蘋果手機上測試可以（測試是在QQ上看的），后來發(fā)現(xiàn)東西放到公眾號上后，在微信端打開還是不行，同樣的問題，而且還跟IOS版本有關(guān)，12以上的還是不行，最后還是找到了解決的辦法，兼容IOS所有的版本：

? ?? document.body.addEventListener('focusout', () => {

? ? //軟鍵盤收起的事件處理

? ? let ua = window.navigator.userAgent;

? ? let app = window.navigator.appVersion;

? ? //$alert('瀏覽器版本: ' + app + '\n' + '用戶代理: ' + ua);

? ? if(!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {

? ? ? ? //$alert('ios端');

var currentPosition, timer;

var speed = 1;

timer = setInterval(function() {

? ? currentPosition = document.documentElement.scrollTop || document.body.scrollTop;

? ? currentPosition -= speed;

? ? window.scrollTo(0, currentPosition); //頁面向上滾動

? ? currentPosition += speed;

? ? window.scrollTo(0, currentPosition); //頁面向下滾動

? ? clearInterval(timer);

}, 100);

? ? } else if(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {

? ? ? ? //$alert('android端');

? ? }

})

完美解決以上問題。