Hello,
I have a WebView whose html content sets the viewport using a meta tag:
<meta name="viewport" content="width=400"/>
And I'm working in an android app but use the Xamarin.Forms paradigm.
To get an Android.Webkit.WebView to enforce the meta tag, I read I must set the flags LoadWithOverviewMode and UseWideViewPort.
I did just that in a purely Xamarin.Android app and it works fine.
Now to get this done in a Xamarin.Forms app I wrote a custom renderer for the WebView and in the OnElementChanged I set those flags on theControl property and this does not work.
What am I doing wrong ?
My code is here : https://gist.github.com/doc212/b8833d30ae96b482d5dc or below.
Thanks!
Xamarin.Forms app:
namespace TestXPF
{
public class App : Application
{
public App ()
{
string html = @"
<html>
<head><meta name='viewport' content='width=400'/></head>
<body style='margin:0'>
<div style='width:200px; background-color:red'>200px</div>
</body>
</html>
";
// The root page of your application
MainPage = new ContentPage {
Content=
new WebView () {
Source = new HtmlWebViewSource()
{
Html = html
}
}
};
}
}
}
Custom WebViewRenderer:
[assembly:ExportRenderer(typeof(WebView), typeof(TestXPF.Droid.WebViewRenderer))]
namespace TestXPF.Droid
{
public class WebViewRenderer : Xamarin.Forms.Platform.Android.WebViewRenderer
{
protected override void OnElementChanged (Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
base.OnElementChanged (e);
Control.Settings.LoadWithOverviewMode = true;
Control.Settings.UseWideViewPort = true;
}
}
}
Pure Xamarin.Android solution:
namespace DroidTest
{
[Activity (Label = "DroidTest", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
protected override void OnCreate (Bundle bundle)
{
base.OnCreate (bundle);
WebView v = new WebView(this);
v.Settings.LoadWithOverviewMode = true; v.Settings.UseWideViewPort = true;
string html = @"
<html>
<head><meta name='viewport' content='width=400'/></head>
<body style='margin:0'>
<div style='width:200px; background-color:red'>200px</div>
</body>
</html>
";
v.LoadData (html, "text/html", "utf-8");
// Set our view from the "main" layout resource
SetContentView (v);
}
}
}