在 Windows Phone 模拟器上获取整页背景图像时遇到问题答案

【问题标题】：Trouble getting full page background image on windows phone emulator在 Windows Phone 模拟器上获取整页背景图像时遇到问题
【发布时间】：2013-01-14 04:30:38
【问题描述】：

背景：我正在尝试为 Windows Phone 7 修改现有的 Web 应用程序。我的开发环境是 Microsoft Visual Studio 2010 高级版，并且我已经安装了 Windows Phone SDK 7.1。我的 Web 应用程序仅包含 HTML 和 CSS。模拟器上的网络浏览器是 Internet Explorer Mobile 9。

问题：我的网页无法全屏显示（宽度很好，但我的页面高度只有显示区域的 80% 左右 strong>，剩下的 20% 显示为纯白色。

例如，我尝试为我的页面获取背景图片并整页显示。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <title>index</title>
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 500px)" href="mobile.css" />          
  </head>

  <body>
    <img src="background2.jpg" id="bbg" alt=""/>
  </body>

</html>

以下是mobile.css：

#bbg {
  position:fixed; 
  top:0; 
  left:0; 

  /* Preserve aspet ratio */
  min-width:100%;
  min-height:100%;
}

我该如何纠正这个问题？有什么想法吗？？

编辑（解决方案）
正如 Fabian 在接受的答案中提到的，这是我必须添加到标记中的内容：

<meta name="Viewport" content= "height= device-height; user-scaleable=no; initial-scale=1.0" />

【问题讨论】：

你的背景图片有多大（以像素为单位）？
另外仅供参考，过去我在尝试让媒体查询与 Windows Phone 一起工作时遇到了很多问题。见blogs.msdn.com/b/iemobile/archive/2010/12/08/…

标签： html windows-phone-7 css

【解决方案1】：

尝试正确设置您的meta viewport 标签。这些控制浏览器窗口中页面的缩放。

如果这仍然没有帮助，请尝试将背景图片设置为设备分辨率 (800x480px)，看看是否有帮助。

【讨论】：

【解决方案2】：

可能是因为没有在 xaml 文件中指定 shell:SystemTray.IsVisible="False"。

<phone:PhoneApplicationPage 
    ....
    shell:SystemTray.IsVisible="False">
...

此代码删除标准 Windows Phone Silverlight 应用程序的上部“状态栏”

【讨论】：