Windows 10 Phone - UWP 应用程序 webview html 页面无法缩放到全屏答案

【问题标题】：Windows 10 Phone - UWP app webview html page does not scale to full screenWindows 10 Phone - UWP 应用程序 webview html 页面无法缩放到全屏
【发布时间】：2018-06-22 18:03:42
【问题描述】：

我有一个简单的 html 页面加载到 Windows Phone 中的 webview 控件，它不能缩放到全屏并且出现一个白色补丁（如所附图像）。

WebView代码如下：

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView x:Name="mainWebView"></WebView>
</Grid>

html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body style="background-color:red; border: 1px solid blue;">
    </body>
</html>

可能是什么原因？是否还有其他需要启用的属性？

【问题讨论】：

标签： webview uwp

【解决方案1】：

您需要将 WebView HorizontalAlignment 和 VerticalAlignment 设置为 Stretch

以下是我的完整代码。

XAML

<Page
    x:Class="App16.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App16"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="mainWebView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Page>

代码背后

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string Loaded = "<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta charset=\"utf-8\" /><title></title></head><body style=\"background-color:red; border: 1px solid blue;\"></body></html>";
            mainWebView.NavigateToString(Loaded);
        }
    }
}

下面是输出。

【讨论】：

这没有帮助，它仍然无法缩放到全屏：
@Neena 这真的很奇怪。我刚刚创建了一个空白项目并使用了您的 html 示例和您的页面示例，它呈现得非常好。请参阅我的更新答案。
我也做了同样的事情，但它无法扩展。这与设备类型有关吗？我正在使用 Lumia 650，版本 1607。操作系统版本 10.0.14393.448。屏幕分辨率 720X1280

【解决方案2】：

问题是状态栏，这解决了问题。

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
        {
            await StatusBar.GetForCurrentView().HideAsync();
        }

【讨论】：

【解决方案3】：

我遇到了类似的问题。但是，只需添加 Margin 即可解决我的问题并全屏打开，这是我的代码可能会对您有所帮助，

HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Height="auto" Margin="0,0,0,0"

只需将边距设置为 0，一切顺利，希望对您有所帮助，:)

UWP Web 视图示例中的完整视图：

【讨论】：