WebView适配指导更新时间: 2025-05-08 16:44:00

一、WebView使用建议

基于App内容形式，合理配置WebView组件，保证WebView随应用从折叠到展开全屏，有合理的窗口展示。
双屏到折叠状态切换，建议三方应用动态监听窗口变化，通知WebView刷新页面
合理配置WebView设置项，保证自适应显示效果

// WebSettings设置
// Sets whether the WebView should enable support for the "viewport"
    HTML meta tag or should use a wide viewport.建议置true
    public abstract void setUseWideViewPort (boolean use)
// Sets whether the WebView loads pages in overview mode, that is,
    zooms out the content to fit on screen by width.建议置true
    public abstract void setLoadWithOverviewMode (boolean overview)

合理获取User-Agent用于设置页面，常见UA及设置接口如下

// Sets the WebView's user-agent string. If the string is null or empty, the
    system default value will be used.
// 常用PC UA：Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36
    (KHTML, like Gecko) Chrome/102.0.5005.62 Safari/537.36
// 常用mobile UA：Mozilla/5.0 (Linux; Android 6.0; Nexus 5
    Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko)
    Chrome/102.0.5005.62 Mobile Safari/537.36
// 常用Tablat UA: Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q)
    AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
    public abstract void setUserAgentString (String ua)

1.1 H5页面设计

基于响应式Web设计来实现界面的显示和布局是目前主流的H5页面设计方式，但也存在问题。由于没有对折叠屏的窗口变化进行合理分析，可能会在展开态存在如下界面显示问题：

界面元素等比放大，显示效果差：如字体太大、图片太大/模糊等。
界面元素延展到界面外，无法操作：如广告框的关闭按钮显示在界面外，无法关闭。
界面内容重叠、错位：如输入框中文字部分显示被截断。

为了避免出现如上基础体验问题，建议前端开发者在H5的设计和开发采用以下的建议：

1.1.1 H5元素设计

字体

对折叠屏握持方式的调研发现，在展开态和折叠态下用户的使用距离没有明显的变化。避免展开时界面字体太大影响体验，因此不建议对展开态字体进行过多放大。展开态和折叠态可采用相同的字体大小或者在展开态字体放大适当的比例（如展开态为折叠态字体大小的1.2倍）。

图标

对于通常的图标元素，建议展开折叠时采用跟字体大小一样的处理规则，如果字体保持一样，则图标也要保持一样的大小；如果字体在展开时少量放大，图标也应该采用相同的放大比例显示。

图片/视频

图片作为信息表达的重要手段，在H5页面设计中应用非常广泛。不同的屏幕尺寸和分辨率会给网页图片带来更高的要求，常见的显示问题有：

美术设计问题-更改显示的图像以适应不同的图像显示尺寸。例如，如果在大屏浏览器上的一个网站上显示一张大的、横向的照片，照片中央有个人，然后当在移动端小屏浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这种情况可能在移动端显示一个更小的肖像图会更好，这样人物的大小看起来更合适。
分辨率切换问题-相同的尺寸，不同的分辨率。大小屏需要不同分辨率的图片以上两个问题都可以借助自适应图片来解决，提供包含多个版本图片的图集，借助CSS媒体查询按需选择。在解决上述问题的同时，图片在页面中的作用也不尽相同，我们把页面中的图片分为两种类型，一种是运营类图片，通常运营广告或分类入口；另一类是具体内容的图片，是内容消费的主体。不同类型的图片建议采用不同的处理方式。
运营类图片/视频：针对运营类图片/视频，建议跟随字体缩放的比例进行缩放，如果字体保持一样，则此类图片/视频也保持一样的大小。为避免展开态运营类图片/视频，等比放大导致一屏幕显示内容过少。建议运营类图片/视频在展开态下，增加运营内容的显示列数；若无法增加显示列数，则运营类图片/视频等比放大时，最高不超过屏幕的1/2高度。
具体内容图片/ 视频：对于具体内容图片/视频，可随着展开折叠进行适当比例的缩放，为了避免展开时图片/视频等比放大造成浏览效率的过度降低，建议在展开态采用内容扩展布局，增加显示列数，例如折叠态下双列显示，在展开态下三列或四列显示。对于单图/视频布局，展开态图片/视频等比放大时，建议最高不超过1屏幕高度。

弹窗

建议展开态和折叠态h5弹窗保持相同的大小，或者按照字体大小的缩放比例进行等比缩放。

其他页面元素

页面中的其他界面元素，如按钮、输入框等，建议展开折叠时高度按照字体大小的缩放比例进行缩放，宽度根据元素本身的响应式规则进行设计，部分元素（如按钮）保持等比缩放，部分元素（如列表、输入框）对宽度进行适当延伸，最宽不超过整个窗口的宽度。

1.1.2 CSS度量单位使用

响应式WEB设计的9项基本原则对设计Web页面具有极好的参考作用，这里我们主要对两种折叠态窗口的CSS度量单位设置提供部分建议。

在通过CSS设置H5页面元素大小时，常用的响应式单位有rem，vw，vh，px：

rem（font size of the root element）是指相对于根元素的字体大小的单位。通常开发者会依赖设备窗口的宽度来计算rem的基准，因此以rem设置的实际长度在折叠屏展开态是折叠态的约两倍。
vw（viewpoint width）, 视窗宽度，通常设置为

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

由于viewport的宽度被设置为设备窗口的宽度，因此以vw为单位的元素的实际长度在折叠屏展开态也是折叠态的约两倍。

px，CSS中定义的px是相对于显示器屏幕分辨率而言的。因此px能够支持网页在移动端的良好展示，并且不会受到折叠屏展开、折叠状态变化的影响。

综上所述，结合各种场景，建议如下:

无需缩放的场景，如字体元素，建议统一使用px作为长度单位。
由于展开态屏幕宽度接近于折叠态屏幕宽度的两倍，因此rem基准值和vw场景下content需要引入参数x进行一定比例的换算，x的值建议为2，应用可以根据应用界面元素的大小进行微调。 ƒ 是在未考虑折叠屏的情况下，网页开发者自行定义的用于定义1rem长度标准的参数值（例如，ƒ=10）。
使用rem的场景， clientWidth为document.body.clientWidth是网页的可视区域的宽度。
使用vw的场景，建议在展开态时，使用代码动态修改viewport的配置内容，将width设置按参数x进行比例换算。

1.2 H5页面布局设计

这里针对的是折叠展开带来的WebView窗口扩大，随之产生的页面布局适配问题。

折叠屏展开态下屏幕宽度变宽，为折叠屏提供更高效的信息展示或更加沉浸的内容浏览提供了机会。

1.2.1 常见布局

H5页面布局在大屏下有如下4种基本适配方式：

内容居中显示（内容不变，将显示位置居中）
内容x轴拉升（Y轴保持不变，X轴横向拉升，比较适合列表型页面）
内容等比缩放（XY轴等比缩放显示，简单快速适配方式）
内容扩展（使用新的内容补充多出来的空间，适合图片运营类页面）
内容流动（调整内容模块去补充多出来的空间，适合模块化页面)

前端开发者可根据网页内容做不同形式的布局适配。现在的css，UI框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中可以采用以下方案：

Flexible Box 模型
Grid 网格布局
Columns 栅格系统（往往需要依赖某个UI库，如Bootstrap）

要实现这些方案，可以借助 CSS Media Query 和 Container Queries。

1.2.2 基于视窗大小的CSS Media Query

以上布局都可以使用基于视窗可视区域大小的 CSS Media Query。利用 CSS Media Query在不同的终端上提供布局的切换。

/* Mobile First */
.card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Tablet */
@media (min-width: 700px) {
    .card--vertical {
        gap: 20px
    }
}
/* Laptop and Desktop */

@media (min-width: 1024px) {
    .card--featured {
        position: relative
    }
    .card--featured .card__thumb {
        position: absolute;
        inset: 0;
    }
}