在本地 html 中使用捏合缩放 web 视图会导致扭曲
我有一个 webview，其中打开了本地 html 文件。这个本地 html 文件正在使用 Google Javascript API 打开 Google 地图。 我已将 webview.getsettings().setbuiltinzoomcontrols 设置为 true。 捏缩放正在发生，但网络视图比例正在扭曲。请告知是否有人知道发生这种情况的原因。 感谢和问候 阿斯塔德芙拉
I have a webview in which a local html file is opened. This local html file is using Google Javascript API to open Google Maps.
I had set webview.getsettings().setbuiltinzoomcontrols to true.
Pinch Zoom is happening but the webview scale is getting distorted. Please tell if anybody knows the reason why is it happening.
Thanks and Regards
Astha Devra
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
webview.getsettings().setbuiltinzoomcontrols 可以对整个 webview 进行缩放（就像拉伸图像一样），并且不与 JavaScript 代码通信。
如果您在 Android Web 浏览器上打开 Google 地图而不是运行本机 Google 地图应用程序，您会注意到同样的情况会发生。
您可以使用 onTouchListener 捕获捏合手势，并通过 webview.loadUrl("javascript: YOUR_ZOOM_IN_FUNCTION") 在 JavaScript 中设置地图的缩放值。
webview.getsettings().setbuiltinzoomcontrols enables scaling of the webview as a whole (just like stretching an image), and does not communicate with the JavaScript code.
You will notice same thing happening if you open Google Maps on Android Web Browser instead of running the native Google Map app.
You can capture the pinch gesture with onTouchListener and set the zoom value of Map in JavaScript by webview.loadUrl("javascript: YOUR_ZOOM_IN_FUNCTION").
大多数 Android 2.x 设备上的 WebView 不会在 JavaScript 中生成多个触摸事件，而是会缩放浏览器内容 - 因此会出现“扭曲”。
为了支持这些设备，您可以增强 Web 容器以生成那些缺失的事件 - 我们之前已经使用 你可以在 github 上找到这个“Polyfill”。
还要确保您的 html 标头通过设置如下所示的视口元标记来禁止用户缩放：
<代码>
<元名称=“视口”内容=“宽度=设备宽度，初始比例= 1.0，最大比例= 1.0，用户可扩展=否”/> />
The WebView on most android 2.x devices does not generate more than one touch event in javascript and instead zooms the browser content - thus the "distortion".
In order to support those devices you can enhance your web container to generate those missing events - which we have done before with this "Polyfill" you may find on github.
Also make sure your html header prohibits user scaling by setting a viewport meta-tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />