WebView automatically zoom in after first change of scale - ios

Question

I have a WebView and i load an image into it. If image is bigger than phone's screen i want to zoom out to have all image on the screen. I do this using WebView.LoadFinished EventHandler. When LoadFinished is triggered i calculate scale to zoom out and set as WebView's MinimumZoomScale and ZoomScale. It works fine but after first zoom in or zoom out image automaticaly zoom in to some specific scale and i can't zoom out. How can i solve it ?
private void InitializeWebView()
{
WebView.ScalesPageToFit = true;
WebView.LoadFinished += WebView_LoadFinished;
}
private void WebView_LoadFinished(object sender, EventArgs e)
{
var contentSize = WebView.ScrollView.ContentSize;
var viewSize = View.Bounds.Size;
var scale = viewSize.Width / contentSize.Width;
WebView.ScrollView.MinimumZoomScale = scale ; //removing this makes that my image doesnt zoom out after loaded
WebView.ScrollView.ZoomScale = scale ;
}
public void LoadAttachment(string fileName)
{
if (string.IsNullOrEmpty(fileName))
{
return;
}
var documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
var targetUrl = documentsPath + "/" + fileName;
var url = new NSUrl(targetUrl);
if (url != null)
{
var request = new NSUrlRequest(url);
WebView.LoadRequest(request);
//Example request: "/var/mobile/Containers/Data/Application/6BDB8CD2-280B-45A3-9109-8E08E1314739/Documents/26112018110204.jpg"
}
}
I try use Lucas Zhang - MSFT's solution like this:
private void WebView_LoadFinished(object sender, EventArgs e)
{
var contentSize = WebView.ScrollView.ContentSize;
var viewSize = View.Bounds.Size;
var scale = viewSize.Width / contentSize.Width;
WebView.ScrollView.MinimumZoomScale = scale;
WebView.ScrollView.ZoomScale = scale;
NSString str = new NSString($"var meta = document.createElement('meta');meta.content='width=device-width,initial-scale={1.0},minimum-scale={scale},maximum-scale={WebView.ScrollView.MaximumZoomScale}';meta.name='viewport';document.getElementsByTagName('head')[0].appendChild(meta);");
WebView.EvaluateJavascript(str);
}
Screenshots:
Image opened
Image scrolled right
Image after first zoom
It is not visible but on the third screenshot there is still posibility to scroll image right. Not all image is on the screen.

Answer 1

Cause:
Because you didn't refer to the tag meta in your html file.
Solution:
Add the following code in the method WebView_LoadFinished
private void WebView_LoadFinished(object sender, EventArgs e)
{
var contentSize = WebView.ScrollView.ContentSize;
var viewSize = View.Bounds.Size;
var scale = viewSize.Width / contentSize.Width;
WebView.ScrollView.MinimumZoomScale = scale ;
WebView.ScrollView.ZoomScale = scale ;
NSString str = new NSString("var meta = document.createElement('meta');meta.content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0';meta.name='viewport';document.getElementsByTagName('head')[0].appendChild(meta);");
webView.EvaluateJavascript(str);
}
minimum-scale=1.0,maximum-scale=2.0
You can set the value of MinimumZoomScale and MaximumZoomScale here.