在混合开发中有H5页面需要缩放的需求,但又不是所有的页面都需要允许缩放。而在混合开发中我的常用做法是只打造一个WebView页面(这样便于内存管理和交互逻辑管理,关于这方面的内容以后再讲)。这个时候最好的做法就是将页面的缩放权限交给H5来自行控制。
在 Android 中需要做的是开启WebView对 viewport mate 的支持:
WebSettings webSettings = webView.getSettings()
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
LayoutAlgorithm是一个枚举用来控制页面的布局,有三个类型:
-
NORMAL:意味着没有呈现的变化。这是针对不同平台和Android版本的最大兼容性的推荐选择。
-
SINGLE_COLUMN:将所有内容移动到一个列中,该列是视图的宽度。
-
NARROW_COLUMNS:如果可能的话,所有的列都不会比屏幕宽。在KITKAT之前只使用这个API级别。
-
TEXT_AUTOSIZING:增加基于启发式的段落的字体大小,以便在概述模式下查看宽视端口布局时使文本具有可读性。当使用此模式时,建议启用zoom support setSupportZoom(boolean)。支持API级KITKAT。
setUseWideViewPort(boolean use)
设置WebView是否应该支持“viewport”HTML meta标记,还是应该使用一个大的viewport。
viewport meta 标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
上面标签的意思就是 viewport的 width等于设备的width,页面初始缩放为1,不允许用户缩放页面。
属性 | 介绍 |
---|---|
width | 设置布局viewport的特定值(''device-width'') |
initial-scale | 设置页面缩放的初始值 |
minimum-scale | 最小缩放比例值 |
maximum-scale | 最大缩放比例值 |
user-scalable | 是否允许用户缩放 |