开发h5页面，兼容移动端的一些问题

最新推荐文章于 2025-06-03 17:03:20 发布

原创最新推荐文章于 2025-06-03 17:03:20 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文分享了使用Vue进行移动端H5页面开发的经验，包括解决输入框聚焦放大、Element UI输入框图标隐藏、ElMessageBox样式调整、输入框长度限制及验证码倒计时等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一个业务是要做一个h5页面，直接用vue写页面。要适配移动端原来真不容易，在开发中也遇到了一些问题，这里记录一下，也希望能对遇到同样问题的朋友有所帮助。

一、当你点击输入框时，聚焦输入框，莫名其妙就放大页面。

在pc页面调试的时候一直没什么问题，在我自己的安卓机上调也没问题，但是测试的苹果手机就出问题了。

这个时候就要设置public文件夹上的index文件缩放关闭

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

二、elementUI使用input输入框type为number类型时，会有不喜欢的小图标

为了能让手机浏览器在点击输入框时，自动弹出数字输入框，设置了type为number，但是用pc端打开时就会有一个上下小图片，想要隐藏掉，这样设置就行。

<style lang="scss" scoped>
:deep(.el-input input::-webkit-outer-spin-button),
:deep(.el-input input::-webkit-inner-spin-button) {
  -webkit-appearance: none !important;
}
</style>

三、用了elementUI的ElMessageBox组件，用手机查看，设置样式问题

ElMessageBox组件在在移动端点开，宽度会拉的很长，想要设置他的样式，发现一直设置不了。

这时可以customClass属性为一个复杂的名字（就是不会跟其他页面的类名相同），设置css样式不为scoped（不然怎么修改样式都修改不了），这样会有样式污染问题。

await ElMessageBox.confirm(
  `是否要继续提交？`,
  '提示',
  {
    confirmButtonText: '继续提交',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'registered-msg-box',
   },
)
<style>
.registered-msg-box {
  width: 80% !important;
}
</style>

四、elementUI输入框设置maxlenght无效，实现输入时就限制输入字数，优雅实现

<el-input
  v-model="formData.factoryName"
  placeholder="请输入工厂名称"
  @input="handleInputFactoryName"
></el-input>
const handleInputFactoryName = (val: string) => {
   //这里设置了限定50字
  formData.value.factoryName = val.slice(0, 50);
};

五、优雅实现发送验证码，倒计时

        <el-form-item label="验证码" required prop="verificationCode">
          <el-input
            v-model="formData.verificationCode"
            placeholder="请输入验证码"
            style="flex: 1"
          ></el-input>
          <el-button type="primary" @click="handleGetCode()" :loading="count !== 0">
            {{ count || '发送验证码' }}
          </el-button>
        </el-form-item>

const codeTimer = ref();
const count = ref(0);
const clearCodeTimer = () => {
  if (codeTimer.value) {
    clearInterval(codeTimer.value);
    codeTimer.value = null;
  }
};
const createCodeTimer = () => {
  codeTimer.value = setInterval(() => {
    count.value -= 1;
    if (count.value === 0) {
      clearCodeTimer();
    }
  }, 1000);
};
const handleGetCode = async () => {
  form.value?.validateField('phoneNumber', async error => {
    if (error) {
      ElMessage.error(error);
    } else {
      //这行调用api发送给后端
      //有效时间，五分钟即300秒
      count.value = 300;
      createCodeTimer();
      ElMessage.success('验证码已发送');
    }
  });
};