2017-01-27 7 views
1

私はWebViewコントロールを備えたwp 8.1アプリケーションを持っています。これは、Assetsフォルダにあるhtmlファイルをロードするため、パッケージにバンドルされています。c#Windows Phone 8.1のhtmlサイズがWebViewのサイズより小さい

WebViewコントロールのサイズは、width = 320、height = 50に設定されています。 htmlには、width = 320px、height = 50pxに設定されたdivが含まれています。

ここで楽しい部分があります。レンダリングされたhtmlは、実際のWebViewのサイズよりもはるかに小さいです(下の図を参照)。

質問(複数可):

  1. ですが、なぜでしょうか?ビューポートまたはスケールに関連していますか?はいの場合は、どうすれば修正できますか?
  2. htmlがWebViewのサイズに合うようにこれを修正するにはどうすればよいですか?

PS:以下のhtmlは私がデモの目的でもっとも簡単です。現実の世界では、私はAPIからhtmlサイズを要求し、APIは私にフォーマットされたhtmlを与え、私はhtmlを制御できません。このすべての目的は、広告ネットワークAPIからのhtml広告を表示することです。

PS2:これはwp 8.1と10の両方のエミュレータで発生し、私のlumina 92​​5では10も勝ちます。

はここXAMLページからコードスニペットされています。ここでは

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

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 
    <WebView Name="webview" Width="320" Height="50"/> 
    <Button Grid.Row="1" HorizontalAlignment="Center" Click="Button_Click">Load me</Button> 
</Grid> 

は背後コードです:ここ

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using Windows.Storage; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Navigation; 

namespace TestWebview 
{ 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      this.InitializeComponent(); 

      this.NavigationCacheMode = NavigationCacheMode.Required; 
     } 

     private async void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) 
     { 
      StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri(@"ms-appx:///Assets/index.html")); 
      Stream stream = await file.OpenStreamForReadAsync(); 
      StreamReader sr = new StreamReader(stream); 
      string content = sr.ReadToEnd(); 
      webview.NavigateToString(content); 
     } 
    } 
} 

指標の内容です。 html

ここ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<title>Untitled Document</title> 
 
<style type="text/css"> 
 
#test{ 
 
    width:320px; 
 
    height:50px; 
 
    background:red; 
 
    position:absolute; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="test">Test</div> 
 
</body> 
 
</html>

エミュレータのスクリーンショットです: enter image description here

答えて

0

あなたは、ビューポートのサイズを設定する必要があります。あなたのhtmlにこれを追加してみてください:

<meta name="viewport" content="width=device-width" /> 

参考:Controlling the viewport

+1

これが動作しているようですが、私は手動でHTMLを変更した場合にのみ。しかし、私が上で述べたように、私はそこに表示されているhtmlのコントロールを持っていません。 InvokeScriptAsyncを使用してメタタグを追加する必要があると仮定していますが、動作させることはできません。これを行う別の方法がありますか? – ciprian

+0

@ciprian [HttpClient](https://msdn.microsoft.com/en-us/windows/uwp/networking/httpclient)を使用してWebページを文字列としてダウンロードできます。次に、文字列を ''と組み合わせます。その後、[NavigateToString](https://msdn.microsoft.com/library/windows/apps/xaml/windows.ui.xaml.controls.webview.navigatetostring.aspx)を呼び出して、結合されたページをwebviewに表示します。 –

+0

@ XavierXie-MSFT私はそうすることができた、それは動作します。 htmlは次のようになります。 – ciprian

関連する問題