css - Phonegap Winodows Phone 8.0 和 8.1 视口(viewport)问题

Question

我正在 Windows Phone 上使用 Phonegap 构建一个应用程序。 在我添加的 CSS 中

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

修复了 720p 和 1080p 分辨率的问题。 当我开始构建时，我注意到在某些模拟器上，视口(viewport)和缩放是完美的，而在其他模拟器上则非常糟糕，就像视口(viewport)根本不起作用一样。这些模拟器适用于 Windows Phone 8.0 和 8.1。

有人知道如何为不同的操作系统修复视口(viewport)吗？

---

Answer 1

我遇到了类似的问题。我通过将其添加到 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);

取而代之的是:

return new Uri(AppRoot + "www/index.html", UriKind.Relative);

然后在我的 index.html 中，我根据操作系统版本加载不同的 css 文件:

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;
}

希望对您有所帮助。它对我有用。