изменить размер шрифта в веб-представлении в UWP

Question

В настоящее время я работаю над проектом UWP и использую веб-представление для показа html контента. Я хочу, чтобы контент в проекте реагировал на размеры экрана. Поэтому мне нужно назначить разные размеры шрифтов для веб-просмотра на ноутбуке размер экрана и экран P C. Следующий код используется для отображения содержимого на экране P C

<StackPanel  x:Name="questionItem" HorizontalAlignment="Center"   Grid.Row="1" Grid.Column="1"   >
   <WebView Name="webview" Width="750"   util:WebViewCustomProperties.HtmlString="{Binding CourseName}"  ScriptNotify="WebViewT_ScriptNotify" DefaultBackgroundColor="Transparent"  />
</StackPanel>

позади файла кода,

 if (courseid != null)
        {
            course.CourseName = "<div style=\"font-size: 25px;VerticalAlignment:Center;font-family:Segoe UI;width: 100%;\">" + course.CourseName + "</div>";
        }

Я дал разную ширину веб-представлению, используя визуальное состояние

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">

            <VisualState >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" MinWindowHeight="0"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="webview.Width" Value="430"/>                                             
                </VisualState.Setters>
            </VisualState>

            <VisualState >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1280" MinWindowHeight="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="webview.Width" Value="750"/>                       
                </VisualState.Setters>
            </VisualState>


        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

Что я хочу сделать, так это дать два размера шрифта веб-представлению, аналогичному ширине. На данный момент это 25 пикселей для ноутбука и P C screen.tisfore в ноутбуке содержание экрана обрезается. Если кто-то может помочь мне с этим, я был бы признателен. Спасибо

Answer 1

изменить размер шрифта в веб-представлении в uwp

Вы можете использовать метод WebView.InvokeScriptAsync для внедрения javascript функции eval и использовать следующий код для изменения сторона шрифта на странице html. Для вашего сценария вы можете прослушать событие CoreWindow.SizeChanged и установить размер шрифта на ширину окна.

Например:

 public MainPage()
 {
     this.InitializeComponent();
     MyWebView.DOMContentLoaded += MyWebView_DOMContentLoaded;
     Window.Current.CoreWindow.SizeChanged += CoreWindow_SizeChanged;

 }

 private async void CoreWindow_SizeChanged(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.WindowSizeChangedEventArgs args)
 {
     if (args.Size.Width == 1280 && isLoaded)
     {
         await MyWebView.InvokeScriptAsync("eval", new string[] { "document.getElementsByTagName(\"div\")[0].style.fontSize=\"" + 30 + "\";" });
     }
 }

 private bool isLoaded;
 private void MyWebView_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
 {
     isLoaded = true;
 }