关于APP内实现界面手动缩放滑动效果

关于APP内页面不能缩放和缩放后不能左右滑动的原因主要有两点：
   1.我们的混合应用使用的视图控件WebView初始化时禁止了页面缩放的功能，需要我们手动设置WebView，将它页面可缩放的属性值设为true；
   2.页面中的meta标签中的viewport限制了页面的缩放功能，需要我们在需要缩放的页面手动更改meta标签viewport属性值；

首先需要将cordova-plugin-ionic-webview插件的可缩放属性值设置为true；

需要赋值的属性值如下：

  settings.setUseWideViewPort(true);//关键点
  settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
  settings.setDisplayZoomControls(false);
  settings.setBuiltInZoomControls(true); // 设置显示缩放按钮
  settings.setSupportZoom(true); // 使页面支持缩放
  settings.setLoadWithOverviewMode(true);

  需要导入   import android.webkit.WebSettings.LayoutAlgorithm;

代码位置在重写父类的init方法中：

此时只是放开了WebView的限制,接下来还需要针对在可缩放的页面进行meta标签中viewport的修改；

在需要缩放页面的ts中导入   public meta:Meta 库，然后在Angular页面初始化的钩子函数中修改meta标签；

this.meta.updateTag({ name: ‘viewport‘, content: ‘viewport-fit=cover, width=1200, user-scalable=yes‘ });   主要是将 user-scalable 由no改为yes;

由于我们是单页面应用，不要忘了在当前页面销毁时将meta标签改成初始值，否则可能会影响不需要缩放页面的样式及显示；

this.meta.updateTag({ name: ‘viewport‘, content: ‘viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no‘ });

需要注意的一点是： 目前需要缩放的html页面中不能被<ion-content></ion-content>包裹，否则放大后的页面上下左右滑动时会很卡顿。

tips：目前此功能只针对安卓应用！基于IONIC与Angular的混合应用

关于APP内实现界面手动缩放滑动效果

原文：https://www.cnblogs.com/aqJakarta/p/13206110.html