如何通过CSS（或JavaScript）仅针对WebView渲染进行样式适配？

一、通过JavaScript检测WebView并添加全局类 #

WebView的User-Agent通常带有特定标识（如Chrome WebView的wv、Facebook WebView的FB_IAB/FB4A、DuckDuckGo的DuckDuckGo），可以通过检测这些标识给根元素添加专属类，再针对性编写CSS。

// 检测WebView环境并添加类
function markWebViewEnvironment() {
  const userAgent = navigator.userAgent.toLowerCase();
  const rootEl = document.documentElement;
  
  // 匹配常见WebView标识
  if (userAgent.includes('wv') || userAgent.includes('fb_iab') || userAgent.includes('fb4a') || userAgent.includes('duckduckgo')) {
    rootEl.classList.add('is-webview');
  }
  
  // 可选：针对特定App的WebView添加精准类
  if (userAgent.includes('fb_iab') || userAgent.includes('fb4a')) {
    rootEl.classList.add('in-facebook-webview');
  } else if (userAgent.includes('duckduckgo')) {
    rootEl.classList.add('in-duckduckgo-webview');
  }
}

// 页面加载时执行
window.addEventListener('DOMContentLoaded', markWebViewEnvironment);

二、基于WebView专属类编写修正样式 #

拿到全局类后，针对出问题的元素调整字体和布局：

/* 通用WebView下的字体修正 */
.is-webview .problematic-text-container {
  font-size: 14px; /* 替换为适配的字号 */
  word-break: break-word; /* 强制换行避免溢出 */
  overflow-wrap: break-word;
  max-width: 100%; /* 确保容器不超出父元素 */
}

/* 针对Facebook WebView的特殊调整（若需要） */
.in-facebook-webview .problematic-text-container {
  font-size: 13px;
}

/* 针对DuckDuckGo WebView的特殊调整（若需要） */
.in-duckduckgo-webview .problematic-text-container {
  font-size: 14px;
}

三、禁用WebView的字体自动缩放 #

部分Android WebView会自动调整字体大小，可通过CSS强制关闭：

.is-webview * {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

额外测试技巧 #

• 用Chrome DevTools的「网络条件」面板手动修改User-Agent，模拟WebView环境调试
• 优先通过CSS优先级（而非!important）覆盖原有样式，避免样式冲突

内容的提问来源于stack exchange，提问作者F. Certainly.