C# Windows Phone 8.1 html размер меньше размера WebView

У меня есть приложение wp 8.1 с элементом управления WebView, который загружает html-файл, расположенный в папке «Активы», поэтому поставляется в комплекте.C# Windows Phone 8.1 html размер меньше размера WebView

Элемент управления WebView имеет размер, равный width = 320 и height = 50. В html содержится div с шириной = 320px, height = 50px.

Теперь идет интересная часть: рендеринг html намного меньше фактического размера WebView, как показано на рисунке ниже.

Вопрос (ы):

Почему это происходит? Связано ли это с видовым экраном или масштабом? Если да, как я могу это исправить?
Как исправить это, чтобы html соответствовал размеру WebView?

PS: Нижеследующий html является самым простым для демонстрационных целей. В реальном мире я запрашиваю размер html из API, и API дает мне форматированный html, и я не контролирую html. Цель всего этого - отобразить html-объявления, поступающие из API рекламной сети.

PS2: это происходит как на эмуляторах wp 8.1, так и на 10, а на моей лампе 925 выигрывает 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>

вот скриншот эмулятора:

источник

2017-01-27 ciprian

Вы должны установить размер окна просмотра. Попробуйте добавить это к вашему HTML:

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

Ссылка: Controlling the viewport

источник

2017-01-28 15:23:16 Gaurav

Это, кажется, работает, но только если я изменить HTML вручную. Однако, как я уже упоминал выше, у меня нет контроля над html, который я показываю там. Я предполагаю, что я должен использовать InvokeScriptAsync для добавления метатега, но я не могу заставить его работать. Есть ли другой способ сделать это? – ciprian

@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), чтобы отобразить объединенную страницу в веб-просмотре. –

@ XavierXie-MSFT Я был в состоянии сделать это, и он работает. Html выглядит примерно так: – ciprian

C# Windows Phone 8.1 html размер меньше размера WebView

ответ

Смежные вопросы