如何将网页横向排列区块转为纵向排列，实现移动端WebView响应式适配

解决方案 #

一、WebView端配置（完全交由网页控制交互） #

1. 布局层面

• 移除WebView外层嵌套的HorizontalScrollView、ScrollView，将WebView的layout_width、layout_height均设置为match_parent，不要指定固定宽高值。

2. 基础属性配置
   在代码中对WebView做如下设置：

WebSettings webSettings = webView.getSettings();
// 启用JS支持，保证页面拖拽等交互生效
webSettings.setJavaScriptEnabled(true);
// 允许网页的viewport meta标签生效，适配移动端尺寸
webSettings.setUseWideViewPort(true);
// 关闭默认缩放适配，完全由网页控制展示规则
webSettings.setLoadWithOverviewMode(false);
// 禁止缩放
webSettings.setSupportZoom(false);
webSettings.setBuiltInZoomControls(false);
webSettings.setDisplayZoomControls(false);

3. 触摸事件权限配置
   给WebView设置触摸监听，禁止父布局拦截触摸事件，所有交互完全交由网页处理：

webView.setOnTouchListener((v, event) -> {
    v.getParent().requestDisallowInterceptTouchEvent(true);
    return false;
});

二、本地网页端响应式适配 #

1. 新增viewport配置
   在网页HTML的<head>标签内添加如下代码，让网页自动适配移动端屏幕宽度：

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

2. Grid布局响应式调整
   给网页的grid容器添加媒体查询规则，小屏幕下自动切换为纵向排列：

/* 原PC端横向grid配置，此处保留你原有代码即可 */
.grid-container {
  display: grid;
  grid-template-columns: 300px 300px 300px; /* 替换为你原有横向排列的列配置 */
  gap: 16px;
}

/* 新增移动端适配规则，屏幕宽度小于阈值时改为纵向排列 */
@media screen and (max-width: 900px) { /* 阈值可根据你实际区块总宽度调整 */
  .grid-container {
    grid-template-columns: 1fr; /* 单列纵向排列 */
  }
}

3. 滚动规则配置
   如果部分场景需要保留横向滚动能力，给对应容器加溢出滚动属性：

.grid-container {
  overflow-x: auto;
  overflow-y: auto;
}

配置完成后加载本地assets网页即可实现需求：所有区块适配移动端展示不被折叠，页面点击、拖拽JS交互完全生效，滚动逻辑由网页自身控制。

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