Fatal编程技术网
  • webview/
  • Windows 10 Phone-UWP应用程序webview html页面未缩放到全屏

Windows 10 Phone-UWP应用程序webview html页面未缩放到全屏

webview uwp

Windows 10 Phone-UWP应用程序webview html页面未缩放到全屏,webview,uwp,Webview,Uwp,我有一个简单的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:l

我有一个简单的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
水平对齐
和
垂直对齐
设置为
拉伸

下面是我的完整代码

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

使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
名称空间App16
{
公共密封部分类主页面：第页
{
公共主页（）
{
this.InitializeComponent（）；
}
已加载私有无效页面（对象发送方，路由目标e）
{
字符串加载=”；
mainWebView.NavigateToString（已加载）；
}
}
}
下面是输出。

您需要将WebView
水平对齐
和
垂直对齐
设置为
拉伸

下面是我的完整代码

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

使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
名称空间App16
{
公共密封部分类主页面：第页
{
公共主页（）
{
this.InitializeComponent（）；
}
已加载私有无效页面（对象发送方，路由目标e）
{
字符串加载=”；
mainWebView.NavigateToString（已加载）；
}
}
}
下面是输出。

问题在于状态栏，这解决了问题

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
        {
            await StatusBar.GetForCurrentView().HideAsync();
        }
问题是状态栏，这解决了问题

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
        {
            await StatusBar.GetForCurrentView().HideAsync();
        }
我也有类似的问题。但是，仅仅添加边距就解决了我的问题，并以全屏方式打开，这是我的代码，可能会对您有所帮助

HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Height="auto" Margin="0,0,0,0"
只需设置边距0，一切都很好，希望对您有所帮助，：）

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

我也有类似的问题。但是，仅仅添加边距就解决了我的问题，并以全屏方式打开，这是我的代码，可能会对您有所帮助

HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Height="auto" Margin="0,0,0,0"
只需设置边距0，一切都很好，希望对您有所帮助，：）

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

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