记录一些移动端H5遇到的问题

2024/10/12

先介绍一个移动端打印日志工具vConsole，它是无框架的，可以在 Vue 或 React 或任何其他框架应用程序中使用

// 法1：使用npm
// 1.安装
npm install vconsole
// 2.使用
import VConsole from 'vconsole';
const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ theme: 'dark' });
// call `console` methods as usual
console.log('Hello world');
// remove it when you finish debugging
vConsole.destroy();

// 法2：使用cdn
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

一、IOS

1.输入字体小于 16px 时会自动放大页面

通过CSS查询判断，给涉及到的输入框添加样式：

@supports (-webkit-touch-callout: none) {
  .ant-input,
  .ant-select-selection-search-input,
  .ant-picker-input input {
    font-size: 16px !important;
  }
}

// @supports：检查浏览器对某个 CSS 特性或属性的支持情况
// -webkit-：带有这个前缀的 CSS 属性，是苹果公司为 iOS 系统中的 Safari 浏览器引入的非标准属性
// -webkit-touch-callout：这个属性控制当用户长按触摸屏上的一个元素（如链接、图片）时出现的提示菜单的显示行为

二、Android

1.滑块滑动触发浏览器手势行为导致切换标签页

在滑块元素上添加触摸事件touchmove，阻止滑块区域的浏览器手势行为

<template>
  <div class="slide-verify-container">
    <div class="title">
      <span>请完成滑块验证</span>
      <CloseOutlined class="close" @click="handleClose" />
    </div>
    <div id="mpanel1" @touchmove.prevent></div>
  </div>
</template>
<script lang="ts" setup>
  import { CloseOutlined } from '@ant-design/icons-vue'
  import { onMounted, onBeforeUnmount } from 'vue'

  function initVerify() {
    ...
  }

  // 阻止滑块区域的浏览器手势行为
  function preventBrowserGesture(e: TouchEvent) {
    e.preventDefault()
  }

  onMounted(() => {
    initVerify()
    // 添加对触摸事件的处理，防止触发浏览器前进后退手势
    const mpanel = document.getElementById('mpanel1')
    if (mpanel) {
      mpanel.addEventListener('touchstart', preventBrowserGesture, { passive: false })
      mpanel.addEventListener('touchmove', preventBrowserGesture, { passive: false })
    }
  })

  onBeforeUnmount(() => {
    // 清理事件监听器
    const mpanel = document.getElementById('mpanel1')
    if (mpanel) {
      mpanel.removeEventListener('touchstart', preventBrowserGesture)
      mpanel.removeEventListener('touchmove', preventBrowserGesture)
    }
  })
</script>

三、其他

1.antdv中带有下拉框内容的组件，打开弹出框之后滑动页面，弹出框固定在页面上，未随父级移动

使用antdv的全局化配置ConfigProvider，它使用 Vue 的 provide / inject 特性，只需在应用外围包裹一次即可全局生效。添加getPopupContainer参数，可以让弹出框（Select, Tooltip, Menu 等）渲染父节点，默认渲染到 body 上，页面滚动时弹出框即可随父级移动

<script setup>
  import { RouterView } from 'vue-router'
  const getPopupContainer = trigger => {
    return trigger?.parentElement || document.body
  }
</script>

<template>
  <a-config-provider :getPopupContainer="getPopupContainer">
    <RouterView />
  </a-config-provider>
</template>

bing