Jus*_*tin 5 viewport webbrowser-control windows-phone-8
实际上,这个问题是在开发Cordova应用程序时发现的,这就是为什么我无法切换到新的WebView但必须继续使用Cordova的扩展WebBrowser.但是我创建了一个没有Corodova的简单测试来验证问题是WebBrowser本身而不是Cordova.
我的测试页面有以下代码:
<!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>
此外,还需要jQuery.我将它加载到WebBrowser控件中.这是我的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>
和我的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());
}
}
}
没有什么特别的,只需使用一些自定义调试代码自动生成模板即可查看屏幕尺寸.
我知道如果我使用设备高度和宽度,我将无法获得像素精确的表示,如本文所述:http: //developer.nokia.com/community/wiki/How_to_set_WebBrowser_control_viewport_dimensions_on_Windows_Phone
我试图实现那里描述的"哈希黑客",但是它需要在方向更改时完整页面重新加载,因为WP不支持对视频维度的动态更改.因此,现在我保持设备高度和宽度,它似乎在WP8上正常工作.
在WP8和WP8.1仿真器上,屏幕分辨率为480*800,WebBrowser大小为480*768(由于状态栏,高度较小),并且始终从C#代码正确报告.
但这是主要问题.
在WP8模拟器上,我的测试从警报中给出了以下输出:
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
一切似乎都很好,我看到我的整个绿色框有红色边框.
但是在WP8.1上,一切都是"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
现在我的绿色框更短(因为WP将视口窗口高度设置为527),我看到它下面有令人讨厌的白色空间.
WP8.1上的设备宽度/高度行为是设计的,还是应该报告的错误(以及在哪里？).如果浏览器呈现错误,如何创建需要具有整页高度的div的布局？
我在 Windows Store App 8.1 和 Windows Phone 8.1 上使用 WebView，我认为问题是相同的。在 Windows 应用商店应用程序上运行良好的东西，在 Windows Phone 8.1 上的结果让我发疯。
如果您更改浏览器的宽度，例如将方向从纵向更改为横向，则在手机上页面不会重新呈现，而是缩放到新尺寸。这可能是您的问题的原因。
但不仅如此。即使给定宽度的第一个显示最初也不会渲染为该尺寸。它以未知大小 x 呈现，并进行缩放以适合您的浏览器。
此缩放使用“em”ad absurbum 执行 css 定义。带有“1em”的文本在不同的显示器上应具有大致相同的大小。但最初的拟合缩放使其成为不可能。微软忘记了缩放功能。
这是视口的问题。在我看来，默认视口对于手机显示屏来说太高了。因为我必须显示计算的 html 页面，所以我有机会调整 html 中的视口。和
Run Code Online (Sandbox Code Playgroud)<meta name="viewport" content="width=380" />
我接着说它应该是什么。但是在显示页面时方向发生变化时，我无法替换视口值，但对我来说，横向显示更大一点的文本是可以接受的。
设置视口的初始比例如下
Run Code Online (Sandbox Code Playgroud)<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
并不是更好，因为没有考虑尺度信息。