2017-01-27 101 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大小小得多,如下圖所示。

問題(S):

  1. 這究竟是爲什麼?它與視口還是比例有關?如果是,我該如何解決?
  2. 我應該如何解決這個問題,因此HTML適合的WebView大小?

PS:下面的html是我用於演示的最簡單的。在現實世界中,我從API請求html大小,而API給了我格式化的html,並且我無法控制html。所有這些的目的是顯示來自廣告網絡API的html廣告。

PS2:這發生在wp 8.1和10模擬器上,以及我的lumia 925 win 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)下載網頁的字符串。然後將該字符串與''組合。在這個調用之後[NavigateToString(https://msdn.microsoft.com/library/windows/apps/xaml/windows.ui.xaml.controls.webview.navigatetostring.aspx)顯示在網頁視圖組合頁面。 –

+0

@ XavierXie-MSFT我能夠做到這一點,它的工作原理。該html看起來像這樣: – ciprian