Question

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

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

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

问题（S）：

为什么会这样？它与视口或比例有关吗？如果是，我该如何解决？
我该如何解决这个问题，以便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);
        }
    }
}

这是 index.html ：

＆＃13;

<!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>

＆＃13;

这是模拟器的屏幕截图：

Answer 1

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

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

参考：Controlling the viewport

c #Windows Phone 8.1 html大小小于WebView大小

1 个答案: