Home/ Questions/Q 9126389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:01:51+00:00

Background : I am trying to modify my existing web application for Windows Phone

  • 0

Background : I am trying to modify my existing web application for Windows Phone 7. My development environment is Microsoft Visual Studio 2010 premium and I’ve installed Windows Phone SDK 7.1. My web application contains HTML and CSS only. The web browser on the emulator is Internet Explorer Mobile 9.

Problem : I’m unable to get my web pages to display full screen (The width is fine but the height of my page is only around 80% of the display area and the remaining 20% is shown plain white.

For example, I tried to get a background image for my page and display it full page.

<!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>

Following is the mobile.css:

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

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

Sample output

How could I correct this? Any ideas??

EDIT (The solution)
As Fabian mentioned in the accepted answer, here’s what I had to add to my mark-up: 

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try setting your meta viewport tags up properly. These control the scaling of the page within the browser window.

    If this still doesn’t help, try setting your background image to the device resolution (800x480px) and see if that helps.

    • 0