Windows Phone 8 Javascript canvas not on whole page

Question

i'm creating an Windows Phone8 Javascript application.

But I have one problem that i can't solve.

I'm working with a canvas, but the canvas is in portrait mode only 1/4 of my screen... (Developping on my Nokia Lumia 520)

Width and height of my canvas are:

canvas.width = window.innerWidth; //480
canvas.height = window.innerHeight; //800

My CSS:

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}

My XAML:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <phone:WebBrowser x:Name="Browser"
                      Loaded="Browser_Loaded"
                      NavigationFailed="Browser_NavigationFailed"
                      IsScriptEnabled="True"
                      />
</Grid>

The Loaded event:

private void Browser_Loaded(object sender, RoutedEventArgs e)
    {
        // Add your URL here
        Browser.Navigate(new Uri(MainUri, UriKind.Relative));
    }

Anyone any idea what i'm missing to use my canvas on the whole page?

See if [this answer](http://stackoverflow.com/questions/17359915/get-screen-resolution-on-a-mobile-website/17359959#17359959) can help you. — , Dec 29 '13 at 20:49
Doesn't work ... My window.devicePixelRatio is undefined, window.screen.deviceXDPI is 96 and window.screen.logicalXDPI is also 96 — brouckaertd, Dec 30 '13 at 12:59

brouckaertd · Answer 1 · 2013-12-30T17:38:52.400

0

This seems to work:

window.devicePixelRatio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

W = (window.innerWidth / window.devicePixelRatio); // Window's width
H = (window.innerHeight / window.devicePixelRatio); // Window's height

canvas.width = W;
canvas.height = H;

One remark: It works in portrait but not in landscape ...

edited Dec 30 '13 at 17:38

answered Dec 30 '13 at 13:29

brouckaertd

354
2
4
15

Windows Phone 8 Javascript canvas not on whole page

1 Answers1