如何用JavaScript动态更新CSS实现Cordova iPad应用字体缩放适配？

你的思路完全正确——动态创建全局CSS规则确实是解决这个问题的最优方案，比你之前尝试的几种方法更高效、更能覆盖所有场景（包括页面跳转后新增的元素）。下面我给你详细讲怎么实现：

核心思路 #

通过JavaScript创建一个专门的<style>元素插入到页面头部，然后动态修改其中的CSS规则，让#app * { -webkit-text-size-adjust: nn% }这个全局样式自动作用于所有#app下的元素，包括后续动态生成的内容。

具体实现步骤 #

1. 初始化动态样式容器 #

首先在页面加载时创建一个空的<style>元素，插入到<head>中，同时保存对它的引用，方便后续修改：

// 创建并插入全局动态样式元素
const dynamicStyleSheet = document.createElement('style');
document.head.appendChild(dynamicStyleSheet);

// 保存规则引用，避免重复创建
let textSizeRule = null;

2. 编写更新规则的函数 #

定义一个函数，接收缩放比例作为参数，动态生成或更新对应的CSS规则：

function updateTextSizeAdjust(zoomRatio) {
  // 计算百分比，用Math.round避免小数精度问题
  const adjustPercentage = Math.round(zoomRatio * 100);
  
  if (textSizeRule) {
    // 如果规则已存在，直接更新样式内容
    textSizeRule.style.cssText = `-webkit-text-size-adjust: ${adjustPercentage}% !important;`;
  } else {
    // 创建新的CSS规则，插入到样式表末尾
    const ruleIndex = dynamicStyleSheet.sheet.cssRules.length;
    textSizeRule = dynamicStyleSheet.sheet.insertRule(
      `#app * { -webkit-text-size-adjust: ${adjustPercentage}% !important; }`,
      ruleIndex
    );
  }
}

这里加!important是为了确保这个规则的优先级足够高，避免被其他局部样式覆盖。

3. 触发更新的时机 #

你需要在几个关键场景调用这个更新函数：

窗口resize时

// 监听窗口大小变化，更新缩放比例和文本调整规则
window.addEventListener('resize', () => {
  // 假设你已经有获取当前#app缩放比例的逻辑，比如getCurrentZoom()
  const currentZoom = getCurrentZoom();
  updateTextSizeAdjust(currentZoom);
});

页面初始化时

确保页面加载完成后就应用初始的缩放比例：

document.addEventListener('DOMContentLoaded', () => {
  const initialZoom = getCurrentZoom();
  updateTextSizeAdjust(initialZoom);
});

页面跳转后（SPA场景）

如果你的应用是单页应用（比如用Vue/React），页面跳转后可能会有新元素生成，需要在路由切换完成后再次调用：

• Vue示例：

// 在路由后置钩子中调用
router.afterEach(() => {
  const currentZoom = getCurrentZoom();
  updateTextSizeAdjust(currentZoom);
});

• React示例（用React Router）：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  
  useEffect(() => {
    const currentZoom = getCurrentZoom();
    updateTextSizeAdjust(currentZoom);
  }, [location.pathname]);
  
  // ...其他代码
}

为什么这个方案更好？ #

• 效率高：不需要遍历所有DOM元素，直接通过CSS规则批量作用于目标元素，性能开销极小。
• 覆盖全面：不管是页面初始化、窗口resize，还是页面跳转后新增的元素，都能自动应用这个规则。
• 维护方便：所有动态样式逻辑集中管理，不需要零散地给元素设置样式。

内容的提问来源于stack exchange，提问作者Alocus