在移动端网页中,如果未正确配置 viewport meta,白板页面可能会在旋转屏幕后出现放大/缩小等显示异常情况,不符合产品预期。
为了确保白板页面在移动端能够正常显示,需要在客户端和入口页面分别进行配置。
在使用 WebView 加载白板页面时,需要设置以下参数:
WebSettings settings = webView.getSettings();
// 设置是否以overview模式显示页面,即页面宽度适配到 WebView 的宽度
settings.setLoadWithOverviewMode(true);
// 设置是否使用宽屏模式
settings.setUseWideViewPort(true);
在入口页面的 标签中,需要添加以下 meta 标签:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
参数说明:
width=device-width: 将页面宽度设置为设备宽度
initial-scale=1.0: 将页面初始缩放比例设置为 1.0
maximum-scale=1.0: 将页面最大缩放比例设置为 1.0
user-scalable=0: 禁止用户缩放页面
必须同时进行客户端和入口页面的配置,才能确保白板页面在移动端正常显示。