2017-01-27 53 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