css - Phonegap Winodows Phone 8.0 and 8.1 viewport problems -


i'm building application phonegap on windows phone. in css i've added

@-ms-viewport {     width: device-width; } 

which fixing problem 720p , 1080p resolutions. when started building, noticed on of emulators viewport , scaling perfect , on others bad, viewport doesn't work @ all. emulators windows phone 8.0 , 8.1.

does know how fix viewport different os?


i had similar problem. fix adding cordovaview.xaml.cs

string os = environment.osversion.tostring(); string result = regex.replace(os, "[a-za-z ]", ""); return new uri(approot + "www/index.html#os=" + result, urikind.relative); 

instead of this:

return new uri(approot + "www/index.html", urikind.relative); 

and in index.html load different css file depending on os version:

try {     var os = window.location.hash.slice(window.location.hash.indexof('#') + 1).replace('os=', '').substr(0, 5);     if (os == '8.0.1') {         document.writeln('<link rel="stylesheet" href="static/styles/windows_8.css" />');     } else {         document.writeln('<link rel="stylesheet" href="static/styles/windows_8_1.css" />');     } } catch (e) {     document.writeln('<link rel="stylesheet" href="static/styles/windows_8_1.css" />'); } 

windows_8.css:

@-ms-viewport {    width: 480px;    height: 800px; } 

windows_8_1.css:

@-ms-viewport {    width: device-width; } 

i hope, helps. works me.


Comments