Windows Phone 8 HTML5 Viewport Is Higher Than The Screen After Update to 8.0.10328.78

windows phone 8 HTML5 viewport is higher than the screen after update to 8.0.10328.78

I have been having this issue in a Cordova/PhoneGap app as well. I even see the issue in Windows Phone 8 HTML5 apps when I am not using PhoneGap (just create a new project in Visual Studio 2012 from "Templates -> Visual C# -> Windows Phone HTML5 App"). This issue does not appear if you are loading the same HTML5 code from a hosted site using the IE app on Windows Phone 8.

The only thing that I have found to get the viewport to work correctly is to hide the system tray.

In MainPage.xaml change

shell:SystemTray.IsVisible="True"

to

shell:SystemTray.IsVisible="False"

This hides the system tray and makes your app a fullscreen app.

For some reason when the app is full screen the viewport behaves as expected.

jquery mobile position fixed in windows phone 8 and viewport height

@media screen and (orientation: portrait) {
 @-ms-viewport {
    width: 320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
 }
}

Fixed footer issue on WP8 Emulator

Use iscroll4 and use few media queries in css:

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
  }
}

@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 480px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
  }
}

This works fine on Windows Mobile 8 Phones. Here is a demo: http://jqtouch.rediffmailpro.com/iScroll/win8Example.html

White space at bottom in Windows Phone 8 phone gap app

Include this in Index.html,

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

Include this in CSS:

@viewport
{
width:320px;
}

@-ms-viewport {
width:320px;
zoom-user:fixed;
max-zoom:1;
min-zoom:1;
}

and include also this,

body, html { 
  -ms-overflow-style: none !important; 
}

This will solve the issue for now, it worked for me in the same situation..!!
:-)

---

Related Topics