¿Se ha roto la altura de la ventana de WebBrowser en Windows Phone 8.1 "por diseño"?
windows-phone-8 webbrowser-control (1)
Estoy usando WebView en Windows Store App 8.1 y Windows Phone 8.1 y creo que el problema es el mismo. Lo que funciona bien en la aplicación Windows Store, el resultado en Windows Phone 8.1 me vuelve loco.
Si cambia el ancho de su navegador, como cambiar la orientación de vertical a horizontal, en el teléfono, la página no se vuelve a renderizar sino que se escala al nuevo tamaño. Esta es probablemente la causa de tu problema.
Pero no solo esto Incluso la primera pantalla con un ancho determinado no se representa originalmente a ese tamaño. Se procesa para un tamaño x desconocido y se adapta a escala en su navegador.
Esta escala realiza una definición de css con "em" ad absurbum. El texto con "1em" debe tener aproximadamente el mismo tamaño en diferentes pantallas. Pero el zoom inicial para el ajuste lo hace imposible. Y Microsoft olvidó hacer el zoom ajustable.
Es una cuestión de la ventana gráfica. En mi opinión, la ventana gráfica predeterminada es muy alta para las pantallas del teléfono. Debido a que tengo que mostrar páginas html calculadas, tengo la oportunidad de ajustar la ventana gráfica en html. Con
<meta name="viewport" content="width=380" />
Paso al lado de lo que debería ser. Pero en un cambio de orientación al mostrar una página, no puedo reemplazar el valor de la ventana gráfica, pero para mí es aceptable tener un texto un poco más grande en el paisaje.
Establecer una ventana gráfica con una escala inicial como esta
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
no es mejor, porque la información de la escala no se considera.
De hecho, este problema se descubrió durante el desarrollo de la aplicación Cordova, por eso no puedo cambiar al nuevo WebView, pero tengo que quedarme con el WebBrowser extendido de Cordova. Pero he creado una prueba simple sin Corodova para verificar que el problema sea con WebBrowser y no con Cordova.
Tengo el siguiente código para mi página de prueba:
<!DOCTYPE html>
<html>
<head>
<title>Mobile sandbox</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
<script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
</head>
<body>
<style>
@-ms-viewport{width:device-width; height:device-height;} /* we need this because according to this article http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/ meta viewport does not work across WP devices but -ms-viewport works */
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* crop away everything, don''t show scrollbars */
}
#allContainer {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: green;
position: absolute; /* to make 100% work */
border: 5px solid red; /* to see where it gets cropped */
}
</style>
<div id="allContainer">
<div>
<button id="measureDimensions">Measure dimensions</button>
</div>
</div>
<script>
$(function () {
$("#measureDimensions").click(function () {
var dims =
"Screen: " +
screen.width + "*" + screen.height + "/r/n" +
"Window: " +
window.innerWidth + "*" + window.innerHeight + "/r/n" +
"Html: " +
$("html").outerWidth() + "*" + $("html").outerHeight() + "/r/n" +
"Body: " +
$("body").outerWidth() + "*" + $("body").outerHeight() + "/r/n" +
"#allContainer: " +
$("#allContainer").outerWidth() + "*" + $("#allContainer").outerHeight();
alert(dims);
});
});
</script>
</body>
</html>
Además, jQuery es necesario. Lo cargo en el control WebBrowser. Aquí está mi MainPage.xaml:
<phone:PhoneApplicationPage
x:Class="PhoneBrowserSL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape"
xmlns:phonec="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<phonec:WebBrowser
x:Name="MiniBrowser"
IsScriptEnabled="True"
Foreground="White"
Background="Black"
Navigated="MiniBrowser_Navigated"
Loaded="MiniBrowser_Loaded"
Unloaded="MiniBrowser_Unloaded"
ScriptNotify="MiniBrowser_ScriptNotify"
LoadCompleted="MiniBrowser_LoadCompleted"
Navigating="MiniBrowser_Navigating"
NavigationFailed="MiniBrowser_NavigationFailed"
IsGeolocationEnabled="True">
</phonec:WebBrowser>
</Grid>
</phone:PhoneApplicationPage>
Y mi MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneBrowserSL.Resources;
using System.Diagnostics;
using Microsoft.Phone.Info;
namespace PhoneBrowserSL
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
// hack from http://developer.nokia.com/community/wiki/How_to_set_WebBrowser_control_viewport_dimensions_on_Windows_Phone
string width = MiniBrowser.ActualWidth.ToString();
string height = MiniBrowser.ActualHeight.ToString();
string screenWidth = Application.Current.Host.Content.ActualWidth.ToString();
string screenHeight = Application.Current.Host.Content.ActualHeight.ToString();
MessageBox.Show("Screen:"+
screenWidth + "*" + screenHeight + Environment.NewLine +
"WebBrowser:" + width + "*" + height);
MiniBrowser.Navigate(new Uri(String.Format("www/index.html#width={0}&height={1}", width, height),
UriKind.Relative));
}
void MiniBrowser_Loaded(object sender, RoutedEventArgs e)
{
Debug.WriteLine("MiniBrowser_Loaded");
}
void MiniBrowser_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
Debug.WriteLine("MiniBrowser_LoadCompleted :: " + e.Uri.ToString());
}
void MiniBrowser_Navigating(object sender, NavigatingEventArgs e)
{
Debug.WriteLine("MiniBrowser_Navigating :: " + e.Uri.ToString());
}
/*
* This method does the work of routing commands
* NotifyEventArgs.Value contains a string passed from JS
* If the command already exists in our map, we will just attempt to call the method(action) specified, and pass the args along
* Otherwise, we create a new instance of the command, add it to the map, and call it ...
* This method may also receive JS error messages caught by window.onerror, in any case where the commandStr does not appear to be a valid command
* it is simply output to the debugger output, and the method returns.
*
**/
void MiniBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
string commandStr = e.Value;
string commandName = commandStr.Split(''/'').FirstOrDefault();
Debug.WriteLine("MiniBrowser_ScriptNotify :: " + commandName);
}
private void MiniBrowser_Unloaded(object sender, RoutedEventArgs e)
{
Debug.WriteLine("MiniBrowser_Unloaded");
}
private void MiniBrowser_NavigationFailed(object sender, System.Windows.Navigation.NavigationFailedEventArgs e)
{
Debug.WriteLine("MiniBrowser_NavigationFailed :: " + e.Uri.ToString());
}
private void MiniBrowser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
Debug.WriteLine("MiniBrowser_Navigated :: " + e.Uri.ToString());
}
}
}
Nada especial, solo una plantilla generada automáticamente con algún código de depuración personalizado para ver las dimensiones de la pantalla.
Soy consciente de que si uso la altura y el ancho del dispositivo, no obtendré una representación precisa de píxeles, como se explica en este artículo: http://developer.nokia.com/community/wiki/How_to_set_WebBrowser_control_viewport_dimensions_on_Windows_Phone
Intenté implementar el "hash hack" como se describe allí, pero requiere una recarga de página completa en los cambios de orientación porque WP no admite cambios dinámicos para las dimensiones de vieport. Por lo tanto, por ahora me quedo con el dispositivo de alto y ancho, y parece funcionar bien en WP8.
En emuladores WP8 y WP8.1, la resolución de pantalla es de 480 * 800 y el tamaño de WebBrowser es de 480 * 768 (la altura es menor debido a la barra de estado), y siempre se informa correctamente desde el código C #.
Pero aquí viene el problema principal.
En el emulador WP8 mi prueba me da la siguiente salida de alerta:
Vertical:
Screen: 480*800
Window: 480*768
Html: 480*768
Body: 480*0 (0 is OK here - because #allcontainer is absolute positioned and flows out of body)
#allContainer: 480*768
Horizontal:
Screen: 480*800
Window: 728*480 (728 is OK here - because status bar in horizontal view gets wider)
Html: 728*480
Body: 728*0
#allContainer: 728*480
Todo parece estar bien, veo toda mi caja verde con el borde rojo.
Pero en WP8.1 todo es "borken":
Vertical:
Screen: 480*800
Window: 480*768
Html: 480*800 (why did you get taller than window???)
Body: 480*0
#allContainer: 480*800
Now my green box is taller and I see no bottom border any more.
Horizontal:
Screen: 480*800
Window: 800*527 (where did you get 527 from???? and why do you ignore the status bar for width???)
Html: 800*480 (why don''t your size match the actually available screen size 728*480 at all????)
Body: 800*0
#allContainer: 800*480
Ahora mi caja verde es más corta (porque WP estableció la altura de la ventana de visualización en 527) y veo un espacio en blanco desagradable debajo de ella.
Es el comportamiento del ancho / alto del dispositivo en WP8.1 por diseño o es un error que debe informarse (¿y dónde?). ¿Cómo creo un diseño que requiere un div con altura de página completa si el navegador lo muestra mal?