简体   繁体   中英

Disabling Zoom option in TWebBrowser in mobile app using Firemonkey

I'm using Delphi 10.1 Berlin for developing a mobile application. I have a TWebBrowser and I need to disable its zooming option. How do I do that?

Although the TWebBrowser component's Touch manager includes a Zoom option in its InteractiveGestures set, it does not seem to control whether zooming is allowed. (I tested it with an Android App - the zoom option did not affect the ability to zoom the displayed page)

It is up to the content being displayed to control the zooming. If you are going to display your own HTML in your component (ie not allow browsing the web in general), then insure that every page has the following in its <head> :

<head>
   <meta name="viewport" id="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1" />
</head>

Have a look at this:

How do you disable viewport zooming on Mobile Safari?

You will have to modify FMX sources.

For Apple iOS: First, copy FMX.WebBrowser.Delegate.iOS.pas to the folder of your project. Than, at the end of

procedure TWebViewDelegate.webViewDidFinishLoad(webView: UIWebView);

add the following lines:

if webView <> nil then
  begin
    webView.scrollView.setMinimumZoomScale(1.0);
    webView.scrollView.setMaximumZoomScale(1.0);
    webView.scrollView.setZoomScale(1.0);
  end;

Recompile project and you will get the webbrowser which fits the contents without zooming possibility.

Alternatively, you can modify:

class function TNativeWebViewHelper.CreateAndInitWebView: UIWebView;

just commenting second line:

 // Result.setScalesPageToFit(True);

This way you will get the webbrowser with unscaled contents, without zooming option. Choose the solution better for your requirements :)

For Android: First, copy FMX.WebBrowser.Android.pas to the folder of your project. Than, at the end of

procedure TAndroidWebBrowserService.InitUIThread;

add the following line:

FJWebBrowser.getSettings.setSupportZoom(false);

Please note, that I checked this code with Delphi 10.2 Tokyo. But at first sight the FMX source code looks the same in this parts, so it should work in Berlin also.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM