iOS 手机中在 textarea 或 input 中输入文字时页面放大

iOS 手机中在 textarea 或 input 中输入文字时页面放大

在 iOS 手机中，当用户在 textarea 或 input 中输入文字时，Safari 浏览器默认会自动放大页面以提高可读性和可用性。这种行为对于某些应用来说可能会导致用户体验不佳，特别是当页面布局因此受到影响时。

以下是几种常见的解决方法：

1. 使用 meta 标签禁止页面缩放
在 HTML 的 部分添加以下 meta 标签，可以阻止页面被放大：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 设置 font-size
另一种方法是将输入框的 font-size 属性值设置为 16px，这样聚焦输入框时就不会自动放大页面了。

@media screen and (-webkit-min-device-pixel-ratio:0){
  textarea, input {
    font-size: 16px;
  }
}

3. 动态调整页面样式
如果上述两种方法不能满足需求，还可以通过监听键盘的显示和隐藏事件来动态调整页面样式，以适应键盘的弹出。

监听键盘显示事件
调整页面样式（如增加底部间距）
监听键盘隐藏事件
恢复原始页面样式

示例代码
假设你正在使用 Vue.js 和 TypeScript，下面是一个简单的示例：

<template>
  <div>
    <textarea v-model="message" @focus="onFocus" @blur="onBlur"></textarea>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('');
    const keyboardIsVisible = ref(false);

    const onFocus = () => {
      keyboardIsVisible.value = true;
      adjustStyles(true);
    };

    const onBlur = () => {
      keyboardIsVisible.value = false;
      adjustStyles(false);
    };

    const adjustStyles = (isVisible: boolean) => {
      if (isVisible) {
        document.body.style.paddingBottom = '200px'; // 增加底部间距
      } else {
        document.body.style.paddingBottom = ''; // 恢复默认样式
      }
    };

    // 监听键盘显示和隐藏
    onMounted(() => {
      window.addEventListener('resize', () => {
        if (keyboardIsVisible.value && window.innerHeight < document.documentElement.scrollHeight) {
          adjustStyles(true);
        } else {
          adjustStyles(false);
        }
      });
    });

    return {
      message,
      onFocus,
      onBlur,
    };
  },
});
</script>

注意事项
使用 user-scalable=no 可能会影响用户的缩放体验。
如果使用 font-size: 16px，请确保这不会影响到页面的其他样式。
动态调整页面样式的方法需要更多的 JavaScript 逻辑来处理，可能会增加代码的复杂度。
选择适合你的应用场景的方法来解决这个问题。