h5兼容移动端【调试vconsole +单位postcss-pxtorem】

本文链接：https://blog.csdn.net/qq_28838891/article/details/137977539

env() 、 constant()：Webkit 的 CSS 函数

postcss-pxtorem：移动端不同的像素密度

布局视口配置：meta name="viewport"

监听视觉视口变化:window.visualViewport

基础回顾

盒模型：width=content（+padding + border）

class="content-box"内容盒模型（W3C盒）

class="border-box"边框盒模型（IE 盒）

scroll滚动

window浏览器视窗：包括滚动条

问题汇总

https://juejin.cn/post/7055599228478816270?searchId=2025011317313573E6A316A5BA79182DD8

https://juejin.cn/post/6885721051360133133?searchId=2025011317313573E6A316A5BA79182DD8

屏幕尺寸兼容

不同端

判断平台：ios/android

userAgent:包括操作系统的名称、版本号、设备类型等信息。

getPlatform() {
    const ua = window.navigator.userAgent.toLocaleLowerCase();
    const isIOS = /iphone|ipad|ipod/.test(ua);
    const isAndroid = /android/.test(ua);
    return {
        android: isAndroid,
        ios: isIOS
    }
}

iPhone安全距离适配

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：

env() 、 constant()：Webkit 的 CSS 函数

iOS11 新增特性，用于设定安全区域与边界的距离，有上下左右四个预定义变量

viewport-fit=cover 使得页面能够完全覆盖视口（包括刘海、圆角等），从而确保 env() 可以正确获取到安全区域的值。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

env() 跟 constant() 需要同时存在，而且顺序不能换。

postcss-pxtorem：移动端不同的像素密度

px to rem

yarn add postcss-pxtorem

postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,  // 根元素字体大小（通常是 16px 或根据设计稿调整）
      propList: ['*'],  // 需要转换的属性，'*' 表示所有属性
      unitPrecision: 5,  // 转换后的精度，默认为 5
      minPixelValue: 1,  // 小于或等于 1px 的值不会被转换
      selectorBlackList: ['.no-rem'],  // 不需要转换为 rem 的类名
    }
  }
}

vconsole

a.import【推荐】

浏览器中显示log和调试信息的 JS 库

npm install vconsole

import VConsole from 'vconsole';
if (import.meta.env.MODE === 'development' && !isPc()) {
    const vConsole = new VConsole();
    Vue.prototype.vconsole = vConsole //把这个方法放到vue原型上，方便在页面中调用 
    this.vconsole.log('这是通过 vConsole 打印的信息');
}
// 判断是否是pc设备
const isPc = () => {
    const userAgentInfo = navigator.userAgent;
    const Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

b.标签src

<% if(process.env.VUE_APP_ENV === 'prod') { %>
    <script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script> 
    <script type="text/javascript">
        localStorage.setItem("vConsole_switch_y", 300);
        localStorage.setItem("vConsole_switch_x", 0);
        new VConsole();
    </script>
<% } %>

屏幕尺寸兼容Viewport视口

布局视口（Layout Viewport）: 通常是网页的初始容器大小，用于CSS布局，对应于 getViewport 返回的尺寸。
视觉视口（Visual Viewport）: 用户实际看到的部分，可以随着用户操作（如缩放和滚动）而改变大小。getVisualViewport 提供这些信息，因地址栏显隐、屏幕旋转、虚拟键盘弹出等导致变化。

布局视口配置：meta name="viewport"

initial-scale默认值1.0

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

监听视觉视口`变化:window.visualViewport`

// 监听视觉视口的尺寸变化
window.visualViewport.addEventListener('resize', function() {
    console.log('Visual viewport size changed:');
    console.log('Width: ' + window.visualViewport.width);
    console.log('Height: ' + window.visualViewport.height);
});

// 监听视觉视口的位置变化
window.visualViewport.addEventListener('scroll', function() {
    console.log('Visual viewport scroll position changed:');
    console.log('OffsetLeft: ' + window.visualViewport.offsetLeft);
    console.log('OffsetTop: ' + window.visualViewport.offsetTop);
});

visualViewport.width：视觉视口的宽度（单位：像素）。
visualViewport.height：视觉视口的高度（单位：像素）。
visualViewport.offsetLeft：视觉视口的左边距（相对于布局视口）。
visualViewport.offsetTop：视觉视口的上边距（相对于布局视口）。
visualViewport.scale：当前的缩放比例，表示页面相对缩放的程度。

// 导入React的useEffect和useState钩子
import { useEffect, useState } from "react";

// 定义getViewport函数，获取当前浏览器的视口大小
const getViewport = () => ({
    width: Math.max(
        document.documentElement.clientWidth || 0,
        window.innerWidth || 0
    ),
    height: Math.max(
        document.documentElement.clientHeight || 0,
        window.innerHeight || 0
    ),
})

// 定义getVisualViewport函数，获取当前的视觉视口大小（可能因为地址栏、键盘等元素的出现而比浏览器视口小）
const getVisualViewport = () => ({
    width: window.visualViewport?.width || 0,
    height: window.visualViewport?.height || 0,
})

// 定义useVisualViewport自定义钩子
export default function useVisualViewport() {
    // 使用useState创建viewport状态，用于存储当前浏览器视口的宽高
    const [viewport, setViewport] = useState({ width: 0, height: 0 })
    // 使用useState创建visualViewport状态，用于存储当前视觉视口的宽高
    const [visualViewport, setVisualViewport] = useState({ width: 0, height: 0 })

    // 使用useEffect处理组件挂载和更新逻辑
    useEffect(() => {
        // 定义handleResize函数，用于在视口大小变化时更新状态
        const handleResize = () => {
            setVisualViewport(getVisualViewport())
            setViewport(getViewport())
        }
        // 为visualViewport对象添加resize事件监听器
        window.visualViewport?.addEventListener("resize", handleResize)
        // 组件卸载时移除事件监听器
        return () =>
            window.visualViewport?.removeEventListener("resize", handleResize)
    }, [])

    // 返回当前的viewport和visualViewport状态
    return { viewport, visualViewport }
}