如何在无viewport元标签的非响应式页面中让注入元素自适应？

方案1：安全注入viewport元标签 #

• 先检测页面是否已存在对应视口标签，不存在时再注入，大部分场景下不会影响原页面PC端布局，移动端直接获得正常适配能力
• 注入代码示例：

const addViewportMeta = () => {
  // 已存在则跳过注入
  if (document.querySelector('meta[name="viewport"]')) return
  const meta = document.createElement('meta')
  meta.name = 'viewport'
  meta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
  document.head.appendChild(meta)
}

• 若担心影响原页面移动端布局，可在你的注入组件挂载时注入，组件卸载时删除新增的标签恢复原状态即可。如果原页面是固定宽度的PC站点，注入viewport会导致原页面在移动端整体缩放，无法接受该影响的话直接选择后续的隔离方案。

方案2：Shadow DOM完全样式隔离 #

• 将React组件渲染到Shadow Root内部，外部页面的全局样式、字体大小设置完全不会渗透到Shadow DOM中，你可以在内部完全自定义适配规则，不受原页面约束
• React 18+ 渲染示例：

const injectContainer = document.createElement('div')
document.body.appendChild(injectContainer)
// 创建Shadow Root
const shadowRoot = injectContainer.attachShadow({ mode: 'open' })
// 内部自定义全局样式，设置根字体大小，可自由使用rem适配
const customStyle = document.createElement('style')
customStyle.textContent = `
  :root { font-size: ${window.innerWidth / 10}px; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
`
shadowRoot.appendChild(customStyle)
// 渲染你的React组件
createRoot(shadowRoot).render(<YourApp />)

• 该方案无需修改原页面任何配置，适配逻辑完全自主可控，也不会影响原页面的样式。

方案3：使用vw/vh视口单位适配 #

• 完全放弃rem，所有尺寸（包括字体大小）直接用vw单位计算，不受原页面根字体大小的影响
• 可以封装简单的单位转换工具，假设设计稿宽度为375px：

// px转vw工具函数
const px2vw = (px, designWidth = 375) => `${(px / designWidth) * 100}vw`

// 组件内使用
const YourComponent = () => {
  return <div style={{
    fontSize: px2vw(16),
    width: px2vw(300),
    padding: px2vw(12)
  }}>
    适配内容
  </div>
}

• 该方案无需修改原页面，无需样式隔离，兼容性覆盖所有现代移动端浏览器，实现逻辑最简单。

方案4：自定义响应式Hook动态计算尺寸 #

• 若需要兼容极旧不支持vw单位的设备，可通过监听窗口大小动态计算缩放比例，所有尺寸直接用动态生成的px值赋值，完全不依赖全局样式
• 自定义Hook示例：

import { useState, useEffect } from 'react'

const useResponsivePx = (designWidth = 375) => {
  const [scale, setScale] = useState(window.innerWidth / designWidth)

  useEffect(() => {
    const handleResize = () => setScale(window.innerWidth / designWidth)
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [designWidth])

  return (px) => `${px * scale}px`
}

// 组件内使用
const YourComponent = () => {
  const getPx = useResponsivePx()
  return <div style={{
    fontSize: getPx(16),
    width: getPx(300)
  }}>
    适配内容
  </div>
}

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