在移动端网页键盘显示期间避免UI失真

在这个移动设备时代，我们的主要挑战是让我们的 Web 应用程序对移动设备友好。网站在移动设备上加载时的主要问题之一是 UI 失真。在本博客中，我们将重点关注 Android 设备中的以下 3 种情况。

1. 在 Android 设备上加载网页时。
2. 当屏幕上显示键盘时。
3. 当屏幕方向从横向变为纵向时，反之亦然。

在 Android 设备上加载网页时。

当网页加载到设备上时，Android 浏览器会调整网页大小。为了避免这种调整大小造成的扭曲，必须设置meta viewport，这反过来会强制浏览器调整其布局视口的大小。

let viewport = document.querySelector('meta[name=viewport]') 
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')

当键盘在屏幕上可见时。

当键盘显示时会出现另一个问题，Android浏览器或IOS chrome浏览器在小键盘弹出后，viewport的高度会被重置，在键盘收回后，页面会有部分内容被遮挡。这可以通过检查虚拟键盘的存在来避免。这可以通过检查屏幕尺寸来理解。只要键盘可见，视口高度就会降低，因为键盘会占用一些屏幕空间。让我们考虑以下两种情况：

1. 当Android设备出现软键盘时，也会触发resize事件。发生这种情况的主要原因是因为与ios不同，键盘不会重叠在页面上，而是从下方推送内容，进而触发调整大小事件。

为解决此问题，在调整大小事件中进行了以下 2 处更改：

a. 向网页添加滚动
b. 使用网页的初始高度重置meta viewport中的高度。
c. 在viewport中添加 height=device-height 属性

document.documentElement.style.setProperty(‘overflow’, ‘auto’)
const metaViewport = document.querySelector(‘meta[name=viewport]’)
metaViewport.setAttribute(‘content’, ‘height=’ + initialHeight + ‘px, width=device-width, initial-scale=1.0’)

// or
let viewport = document.querySelector('meta[name=viewport]') 
viewport.setAttribute('content', 'width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')

2. 当软键盘消失时，也会触发resize事件
   在这种情况下，我们重置meta viewport

const metaViewport = document.querySelector('meta[name=viewport]')
metaViewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')

当屏幕方向改变时。

当方向改变时，用户界面会扭曲。要解决这个问题，您需要在调整大小事件中设置可视view port，只要屏幕尺寸发生变化，该事件就会被触发。这甚至在使键盘显示时也适用。

要检查屏幕方向是否从纵向模式变为横向模式或反之，您需要将当前屏幕宽度和屏幕高度与屏幕的初始宽度和高度进行比较。

解决此问题的步骤：

• 首先，您需要获取初始宽度和高度。
• 检查初始宽度是否与当前宽度相同。
• 如果相同，检查键盘是否可见

您需要检查初始高度和当前高度，如果当前高度较小，假设有键盘，我们启用scroll property并使用初始高度和设备宽度设置view port。

window.innerHeight < initialHeight
document.documentElement.style.setProperty(‘overflow’, ‘auto’)
viewport.setAttribute(‘content’, ‘height=’ + Security.initialHeight + ‘px, width=device-width, initial-scale=1.0’)

如果高度相同并且键盘不可见，则需要隐藏滚动并使用设备宽度重置视口。

document.documentElement.style.setProperty(‘overflow’, ‘hidden’)
viewport.setAttribute(‘content’, ‘width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0’)

- 如果初始宽度和当前宽度不同，则我们重置视口

viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')

并将初始宽度和高度重置为当前宽度和高度

initialWidth = window.innerWidth 
initialHeight = window.innerHeight