安卓webview怎样适配屏幕

在 Android 的 WebView 中适配不同屏幕尺寸，通常从 HTML/CSS、WebView 配置、视口（viewport）、图片与布局 几个方面入手。下面给你一套比较完整、实用的方案。

一、WebView 基础配置（Java / Kotlin）

1. 启用 JavaScript（一般都需要）

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

2. 支持缩放（按需）

settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false); // 隐藏缩放按钮

3. 使用 WideViewPort + 自适应

settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

✅ 关键点：

• setUseWideViewPort(true)：按网页原始宽度加载
• setLoadWithOverviewMode(true)：自动缩放到屏幕宽度

二、HTML 端必须加 Viewport（非常重要）

在网页 <head> 中一定要加：

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

说明：

• width=device-width：使用设备宽度
• initial-scale=1.0：初始不缩放
• user-scalable=no：禁止用户缩放（看需求）

三、CSS 适配屏幕（推荐方案）

1. 使用相对单位

body {
  font-size: 16px;
  width: 100%;
}

.container {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

2. 使用 flex 布局（最稳）

.container {
  display: flex;
  flex-wrap: wrap;
}

3. 图片自适应

img {
  max-width: 100%;
  height: auto;
}

四、适配不同分辨率（高清屏）

1. 使用 rem + JS 动态设置（常见）

<script>
  function setRem() {
    var w = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = w / 10 + 'px';
  }
  setRem();
  window.onresize = setRem;
</script>

.box {
  width: 5rem; /* 50% 屏宽 */
}

五、Android 端额外注意点

1. 全屏 / 状态栏适配

webView.setFitsSystemWindows(true);

2. 横竖屏

<activity
    android:configChanges="orientation|screenSize"
    android:name=".WebActivity"/>

避免 WebView 重新加载。

六、常见坑总结

❌ 只设置 WebView 宽高 match_parent 不够
❌ 忘记加 viewport
❌ 使用固定 px 布局
❌ WebView 缩放开启但页面不允许缩放

七、推荐组合方案（最稳妥）

✅ WebView：

settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
settings.setJavaScriptEnabled(true);

✅ HTML：

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

✅ CSS：

• flex
• 百分比 / rem
• img { max-width:100% }

如果你愿意，可以告诉我：

• 是 加载自己的 H5 页面 还是 第三方网页
• 是否需要 禁止缩放
• 是 手机 App 内嵌 还是 公众号 / 混合开发

我可以直接给你一套 可复制的完整代码模板。