ios12中遇到的带input弹窗的错位问题的解决方法

下面是详细讲解iOS 12中遇到的带input弹窗的错位问题的解决方法的完整攻略。

问题描述

在iOS 12中，有些情况下，当页面中弹出带有input输入框的弹窗时，弹窗中的input输入框会出现位置错位的问题。这个问题通常会在Safari浏览器上出现，对于用户的体验造成了一定的影响。

解决方法

方法一：vh单位

该问题的根源在于iOS 12对于vh（视口高度）单位的处理不大友好，因此一种解决方法是使用百分比单位来替代vh单位。

举个例子，原来我们可能会在样式中写：

.popup {
  height: 80vh;
}

这里的80vh表示弹窗高度是整个视口高度的80%。而在iOS 12中，改为使用百分比单位，即：

.popup {
  height: 80%;
}

这样可以避免vh单位带来的问题。

方法二：fixed定位

另一种解决方法是使用fixed定位来固定弹窗的位置。这个方法的原理是通过fixed定位将弹窗固定在页面的底部，然后通过负margin值来将弹窗上移一定距离，以达到与页面中心对齐的效果。

举个例子，假设有一个弹窗的HTML结构如下：

<div class="popup">
  <input type="text">
  <button>确定</button>
</div>

我们可以给这个popup元素添加如下样式：

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  height: auto;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transform: translateY(50%);
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
}

其中，transform属性用来将弹窗上移一定距离，达到与页面中心对齐的效果。这里的50%是一个经验值，可以根据实际情况进行调整。

示例

下面给出两个示例，分别演示了百分比单位和fixed定位两种方法的应用。

示例一：百分比单位

HTML结构如下：

<div class="popup">
  <input type="text">
  <button>确定</button>
</div>

CSS样式如下：

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  height: auto;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transform: translateY(50%);
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
}

示例二：fixed定位