【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、IOS使用Vant表单组件输入框获取焦点后放大页面问题

使用Vue+Vant做的移动端项目，在登录界面使用Vant的表单组件van-input时发现在真机测试IOS会出现获取焦点输入时会撑大原页面的宽度，每一个输入框获取到焦点就会页面就会放大一点点，需要双指缩放才能回到原来的比例。

经过一番百度后发现：

在移动端开发项目中，发现页面在使用 iPhone 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大，而且失去焦点之后页面不能返回原来的样子。
手指双击页面时候也会放大
检查了下，功能上没有什么大问题，但是页面会整体放大，而且失去焦点之后页面不能返回原来的样子。用户体验不好
最后找到原因：苹果觉得点击输入框放大是一个“很好”的体验，就擅自把页面给放大了

原文链接：IOS移动端，表单input聚焦时页面放大的解决办法_祈澈菇凉的博客-CSDN博客

解决方法也是参考原po，在public/index.html文件加上

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

initial-scale属性控制页面最初加载时的缩放等级，即当页面第一次 load 的时候缩放比例。

maximum-scale属性控制允许用户缩放到的最大比例。

minimum-scale 属性控制允许用户缩放到的最小比例。

user-scalable 属性控制用户是否可以手动缩放。

（来自原po，仅作记录）

修改meta后IOS没有再出现需要手动缩放这个问题了。

二、van-tab-line活跃状态样式出现问题

如图，因为项目使用的是van-tab切换账号登录和手机号登录，修改meta后发现标签下方的van-tab-line样式出现错乱，但是切换tab之后样式又没有问题了。调试后发现是van-tab-line的transform属性的值出现问题。因为暂时没有找到安卓和ios共同适配的transform的数值，所以直接改为设置活跃tab的border-bottom替代vant原来的van-tab-line

【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题,项目复盘分析类,vue.js,前端,javascript,elementui

最终效果：

【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题,项目复盘分析类,vue.js,前端,javascript,elementui

三、安卓软键盘遮挡问题

安卓输入框获取焦点后弹出软键盘，软键盘会遮住下面的输入框，看了网上很多的解决方案，但是resize事件不生效……= =最后决定采用了比较暴力的方法

首先判断设备：javascript - 可能这些是你想要的H5软键盘兼容方案 - 个人文章 - SegmentFault 思否

var judgeDeviceType = function () {
  var ua = window.navigator.userAgent.toLocaleLowerCase()
  var isIOS = /iphone|ipad/.test(ua)
  var isAndroid = /android/.test(ua)
  return {
    isIOS, isAndroid
  }
}

data () {
    return {
        deviceType: judgeDeviceType(),
    }
}

然后在当前页面包裹的div动态绑定样式

<template>
    <div :style="{paddingBottom: changeBottom,overflow: 'auto'}">
        // 页面
    </div>
</template>

这个changeBottom就是软键盘的高度，默认是0px

当输入框获取到焦点（触发focus事件）时，通过changePaddingBottom方法改变changeBottom的值，产生滚动条让滚动条滚动到底部

              <van-field
                  v-model.trim="loginForm.userName"
                  placeholder="请输入账号"
                  class="mb-6"
                  clearable
                  :rules="userNameRules"
                  ref="userName"
                  show-error-message
                  @focus="changePaddingBottom"
              />

    changePaddingBottom() {
      if (this.deviceType.isAndroid) {
        clearTimeout(this.timer1)
        this.changeBottom = '75%'
        if(app.scrollTop === 0) {
          this.timer1 = setTimeout(() => {
            app.scrollTo(0, app.scrollHeight)
          },50)
        }
      }
    },

最终效果

【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题,项目复盘分析类,vue.js,前端,javascript,elementui