Note that there are some explanatory texts on larger screens.

plurals
  1. POTrouble getting full page background image on windows phone emulator
    text
    copied!<p><strong>Background</strong> : 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.</p> <p><strong>Problem</strong> : I'm unable to get my web pages to display full screen (The width is fine but <strong>the height of my page is only around 80% of the display area</strong> and the remaining 20% is shown plain white.</p> <p>For example, I tried to get a background image for my page and display it full page.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;meta http-equiv="Cache-control" content="no-cache" /&gt; &lt;title&gt;index&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 500px)" href="mobile.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="background2.jpg" id="bbg" alt=""/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Following is the mobile.css:</p> <pre><code>#bbg { position:fixed; top:0; left:0; /* Preserve aspet ratio */ min-width:100%; min-height:100%; } </code></pre> <p><img src="https://i.stack.imgur.com/ErS9Q.png" alt="Sample output"></p> <p>How could I correct this? Any ideas??</p> <p><strong>EDIT (The solution)</strong><br> As Fabian mentioned in the accepted answer, here's what I had to add to my mark-up: </p> <pre><code>&lt;meta name="Viewport" content= "height= device-height; user-scaleable=no; initial-scale=1.0" /&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload