c# Windows Phone 8.1 html size小于WebView size答案

【问题标题】：c# Windows Phone 8.1 html size smaller than WebView sizec# Windows Phone 8.1 html size小于WebView size
【发布时间】：2017-06-13 17:06:03
【问题描述】：

我有一个带有 WebView 控件的 wp 8.1 应用程序，它加载位于 Assets 文件夹中的 html 文件，因此捆绑在包中。

WebView 控件的大小设置为 width=320 和 height=50。 html 包含一个设置为 width=320px, height=50px 的 div。

现在有趣的部分来了：渲染的 html 比实际的 WebView 大小要小得多，如下图所示。

问题：

为什么会这样？它与视口或比例有关吗？如果是，我该如何解决？
我应该如何解决这个问题，以便 html 适合 WebView 大小？

PS：下面的 html 是我用于演示的最简单的。在现实世界中，我从 API 请求 html 大小，API 给了我格式化的 html，我无法控制 html。所有这些的目的是显示来自广告网络 API 的 html 广告。

PS2：这发生在 wp 8.1 和 10 模拟器上，在我的 lumia 925 win 10 上也是如此。

这是来自 xaml 页面的代码 sn-p：

<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);
        }
    }
}

这是index.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>

这是模拟器的屏幕截图：

【问题讨论】：

标签： c# html webview windows-phone-8.1 uwp

【解决方案1】：

您需要设置视口大小。尝试将其添加到您的 html 中：

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

参考：Controlling the viewport

【讨论】：

这似乎有效，但前提是我手动修改了 html。但是，正如我上面提到的，我无法控制在那里显示的 html。我假设我必须使用 InvokeScriptAsync 来添加元标记，但我不能让它工作。还有其他方法吗？
@ciprian 您可以使用HttpClient 以字符串形式下载网页。然后将字符串与<meta/> 结合起来。之后调用 NavigateToString 在 webview 中显示组合页面。
@XavierXie-MSFT 我能够这样做，并且它有效。 html 看起来像：
@XavierXie-MSFT 我能够这样做，并且它有效。 html 类似于：<html><head><meta name="viewport" content="width=device-width" /></head><body><div>..html content from third party ...</div></html>。现在的问题是我无法单击 div 内的链接。这似乎不是 c#/wp 问题，而更像是一个 javascript 问题（捕获事件）。我尝试使用上述结构创建一个 html 文件，并且在我尝试过的任何浏览器中的行为都是相同的。关于这个有什么提示吗？