0

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?

Remy Lebeau
  • 555,201
  • 31
  • 458
  • 770
test12345
  • 367
  • 1
  • 21

2 Answers2

0

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 (i.e. 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?

Dave Olson
  • 1,435
  • 1
  • 9
  • 16
  • Couldn't you also inject this into the DOM on any page upon loading? – Jerry Dodge Jun 28 '17 at 14:51
  • That's a interesting thought. First, I know you could get to the DOM using the old TWebBrowser component (when it was windows-only and it was using IE). But I can't see how to access the DOM using the new FMX TWebBrowser. Also, the OnFinishedLoad event doesn't tell you what just finished loading; it's fired after *every* load finishes (any JS and CSS *and* any AJAX calls). So you'd have to add some complexity there to figure-out when to inject..... – Dave Olson Jun 28 '17 at 15:10
  • .....And assuming you could get at the DOM, I still think it's dangerous to inject HTML into a foreign page. It's almost a guarantee that you'll mangle things. – Dave Olson Jun 28 '17 at 15:10
0

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.

zdzichs
  • 205
  • 2
  • 6
  • FMX.WebBrowser.Delegate.iOS.pas is for iOS only. I will try to find similar solution for Android. – zdzichs Jun 29 '17 at 09:23
  • I have edited the answer for both mobile platforms. The solution worked for iOS 10.3.2 and Android 5.1.1. Be aware of problems with newer Android versions, adressed by the fresh patch for Tokyo. – zdzichs Jun 29 '17 at 17:51
  • @zdzichs What are the issues for newer Android versions introduced by the patch? – Dave Nottage Jun 29 '17 at 21:51
  • Sorry I mean the issues solved by the patch, which is available only for Tokyo, while @test12345 uses Berlin... – zdzichs Jul 10 '17 at 09:24