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?
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 ...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.