IOS 瀏覽器頁面布局錯位(如：點不到)的分析與解決

IOS 瀏覽器軟鍵盤的拉起與收縮、微信 IOS 瀏覽器底部導航條的顯示與隱藏，很容易導致頁面布局錯位(相對窗體的絕對定位元素)：

明明按鈕在這里，卻要在上面一點兒點擊屏幕才能點到它

明明彈框是居中顯示的，卻向上偏移了很多，導致下面很多空白

明明是固定浮動在某個位置，卻點不到它

1. Android 與 IOS 的差異

在 Android 中，軟鍵盤的彈起與收縮會觸發(fā) window 對象的 resize 事件，而 IOS 不會

微信 IOS 瀏覽器底部導航條的顯示與隱藏會觸發(fā) window 對象的 resize 事件，而 Android 中沒有底部導航條

2. IOS 里的一些特性

為了達到極致的體驗，IOS 瀏覽器很多特性是不遵循 W3C 規(guī)范的

軟鍵盤的彈起與收縮不會觸發(fā) window 對象的 resize 事件

軟鍵盤收縮后，固定定位的元素處于錯位狀態(tài)，需要滑動頁面后才能刷新頁面恢復到正常狀態(tài)

3. 具體情況分析

不管是 IOS 瀏覽器軟鍵盤的拉起與收縮，還是微信 IOS 瀏覽器底部導航條的顯示與隱藏，都是改變的 window 窗體的大小。

微信 IOS 瀏覽器底部導航條的顯示與隱藏跟軟鍵盤的拉起與收縮是差不多的，但微信 IOS 瀏覽器底部導航條還有一個很大的特點：

在單頁面應用(SPA)中，當路由發(fā)生變化時，底部導航條會一下子就顯示，而這很難確定是先渲染了頁面還是先顯示了底部導航條，

這也很容易導致元素布局錯位。

4. 怎么解決

4.1 監(jiān)聽鍵盤彈起與收縮，自動做一些操作

新建 watch-keyboard.js 腳本，引入到頁面中。

當頁面中鍵盤彈起時，body 會有 keyboard-active class，可以根據這個隱藏一些元素。

import {isIos} from '../utils';

import debounce from 'lodash/debounce';

// 初始高度

const winHeight = window.innerHeight;

// 判斷是不是彈起了軟鍵盤

const judgeDistance = 200;

if (!isIos) {

window.addEventListener(

'resize',

debounce(() => {

if (window.innerHeight < winHeight - judgeDistance) {

// 鍵盤彈起

document.body.classList.add('keyboard-active');

} else {

document.body.classList.remove('keyboard-active');

}

}, 300),

!1

);

}

else {

// IOS 軟鍵盤的彈起與收縮不會觸發(fā) `window` 對象的 `resize` 事件，用定時器實現

// 保證能夠滾動

document.body.style.minHeight = (winHeight + 2) + 'px';

// 上兩次高度記錄

let secondLastWinHeight = winHeight;

// 上一次高度記錄

let lastWinHeight = winHeight;

setInterval(() => {

const newWinHeight = window.innerHeight;

// 變化結束

if (secondLastWinHeight !== lastWinHeight && lastWinHeight === newWinHeight) {

if (newWinHeight < winHeight - judgeDistance) {

// 鍵盤彈起

document.body.classList.add('keyboard-active');

} else {

document.body.classList.remove('keyboard-active');

// window 需要滾動一下，讓頁面刷新一下，否則彈框會出現錯位的問題

window.scrollTo(0, window.scrollY ? window.scrollY - 1 : 1);

}

}

secondLastWinHeight = lastWinHeight;

lastWinHeight = newWinHeight;

}, 300); // 可以根據需要調整間隔時間(越小越精確)

}

4.2 監(jiān)聽窗體大小變化，執(zhí)行一個回調，做更多操作

當軟鍵盤彈起時，又點擊了一個按鈕，然后顯示彈框(如：從底部向上彈出)的時候，這個時候就需要等待軟鍵盤收起之后，IOS 刷新屏幕之后，再顯示彈框。

新建 wait-for-stable-win-height.js 腳本，引入到頁面中。

import { isIos } from '../utils';

/**

* 等待 window 高度不變了之后執(zhí)行一個回調函數

*

* @param onComplete 完成的回調

* @param delay 延遲多少時間再判斷

* @param interval 定時器間隔時間

*/

export default ({ onComplete, delay = 200, interval = 50 }) => {

setTimeout(() => {

let winHeight = window.innerHeight;

const timer = setInterval(() => {

const newWinHeight = window.innerHeight;

if (winHeight === newWinHeight) {

clearInterval(timer);

if (onComplete) {

if (!isIos) {

setTimeout(() => {

onComplete();

}, 100);

return;

}

// window 需要滾動一下，讓頁面刷新一下，否則彈框會出現錯位的問題

window.scrollTo(0, window.scrollY ? window.scrollY - 1 : 1);

setTimeout(() => {

onComplete();

}, 200);

}

} else {

winHeight = newWinHeight;

}

}, interval);

}, delay);

};

后續(xù)

版權聲明：自由轉載-非商用-非衍生-保持署名(創(chuàng)意共享 3.0 許可證)

總結

以上是生活随笔為你收集整理的android界面布局错位,IOS 浏览器页面布局错位（如：点不到）的分析与解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。