如何解决Xamarin.Forms中WebView无法实现缩放的问题

问题原因及修复方案 #

1. 附加属性归属错误
   你当前将WebView.EnableZoomControls、WebView.ScalesPageToFit两个附加属性写在了WebView.Source节点下，这两个属性是作用在WebView控件本身的，放在Source节点下不会生效。
2. 外层ScrollView手势冲突
   WebView外层套了ScrollView会拦截触摸缩放手势，导致WebView的缩放逻辑无法触发，无特殊滚动需求的话直接删掉外层ScrollView即可。
3. 无效WidthRequest配置
   WebView设置了WidthRequest="80"，会限制WebView的实际渲染宽度，和你设置的HorizontalOptions="FillAndExpand"逻辑冲突，直接删掉这个配置即可。

修复后正确XAML代码 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="highchart.MainPage">
    <WebView 
        VerticalOptions="FillAndExpand" 
        HorizontalOptions="FillAndExpand"
        WebView.EnableZoomControls="true"
        WebView.ScalesPageToFit="true">
        <WebView.Source>
            <HtmlWebViewSource x:Name="HighChart"/>
        </WebView.Source>
    </WebView>
</ContentPage>

额外适配注意事项 #

如果你的WebView加载的是自定义HTML内容，需要在HTML的head节点中添加viewport配置，允许页面缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

如果是Android平台额外出现缩放不生效的情况，可以自定义WebView渲染器强制开启缩放设置：

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace YourNamespace.Droid.Renderers
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        public CustomWebViewRenderer(Context context) : base(context) { }
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Settings.BuiltInZoomControls = true;
                Control.Settings.DisplayZoomControls = false;
                Control.Settings.SetSupportZoom(true);
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Leafrain-Legit2