モバイルデバイスのUWP WebViewでコンテンツのフィットを無効にするにはどうすればよいですか？

私は、変化するdivブロックを持つhtmlページを持っています。モバイルデバイスのUWP WebViewでコンテンツのフィットを無効にするにはどうすればよいですか？

このブロックに新しいテキストが表示されると、テキスト全体がWebViewに収まるように、フォントサイズが減少し始めます。

フォントサイズを変更しないでください。スクロールバーがWebViewに表示されます。

問題はモバイルデバイスでのみ発生します。 HTMLページの

コード：XAMLページの

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Problem with Page</title> 
    </head> 
    <body> 
     <script> 
     AddText = function (v) { 
      var div = document.getElementById('TextContainer'); 

      div.innerHTML = div.innerHTML + v; 
     }; 
     </script> 
     <div style="font-size: 250%;" id="TextContainer"></div> 
     <input type="submit" value="button" onClick="AddText(this.value)"> 
    </body> 
</html>

コード：

<Page 
    x:Class="EvidentCalculator.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:EvidentCalculator" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <WebView Margin="3,0,3,0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="150" x:Name="WebContainer"/> 
     <Button Grid.Row="1" Content="Invoke script!" Click="BtnClick"/> 
    </Grid> 
</Page>

コードの背後にある：

/// <summary> 
    /// An empty page that can be used on its own or navigated to within a Frame. 
    /// </summary> 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      InitializeComponent(); 

      Loaded+=OnLoad; 
     } 

     private async void OnLoad(object sender, RoutedEventArgs e) 
     { 
      //TODO Need some code to load html into WebView!!! 
     } 

     private async void BtnClick(object sender, RoutedEventArgs e) 
     { 
      await WebContainer.InvokeScriptAsync("AddText", new[] { "Some test text" }); 
     } 
    }

出典

2017-06-12 Boris Salimov

解決方法は、ViewBoxです。 – lindexi

divブロックの 'innerText'を追加しようとしました。しかし、私はあなたの問題を再現できませんでした。あなたのhtmlページに関する詳細を共有してください。 –

@ NicoZhu-MSFT質問を説明するためのコードをいくつか追加しました。 –

私はあなたのコードをテストし、あなたの問題を再現しております。問題は、ボタンのテキストを追加したときにブロックdivが伸びていて、自動的に折り返されなかったことです。 divブロックが正常に機能するように、word-break:break-allでスタイルを作成できます。あなたはWebViewの中にスクロールバーと一列にテキストを必要とし、テキストのフォントサイズを維持した場合

<body> 
    <script> 
     AddText = function (v) { 
      var div = document.getElementById('TextContainer'); 
      div.innerHTML = div.innerHTML + v; 
     }; 
    </script> 
    <div style="font-size: 250%; word-break:break-all" id="TextContainer"></div> 
    <input type="submit" value="button" onClick="AddText(this.value)" /> 
    <button id="btnClick" type="button" value="Some test" onclick="AddText(this.value)">Click Me </button> 
</body>

、あなたはスタイルにoverflow-y:scrollを追加することができます。

<div style="font-size: 250%; overflow-y:scroll" id="TextContainer" ></div>

出典

2017-06-14 02:35:04

残念ながら、私が必要とする解決策ではありません。 WebViewのスクロールバーで1行にテキストが必要です。（折り返しなし）そして私は問題を再現するためのコードを追加することを忘れました、残念です。 Xaml-pageのWebViewでVerticalAlignment = "Top" Height = "150"を追加する必要があります。 –

divスタイルに 'overflow-y：scroll'を追加することで実現できます。 –

上記の回避策を試しましたか？まだ他の質問がある場合は、ここに投稿してください。 –

モバイルデバイスのUWP WebViewでコンテンツのフィットを無効にするにはどうすればよいですか？

答えて

関連する問題