为什么我的 Cordova 应用程序的字体在 Windows Phone 8.1 设备上如此之小？答案

【问题标题】：Why is the font of my Cordova App so extremely small on Windows Phone 8.1 Device?为什么我的 Cordova 应用程序的字体在 Windows Phone 8.1 设备上如此之小？
【发布时间】：2015-12-16 21:38:47
【问题描述】：

我创建了一个 Web 应用程序，现在将其转换为一个 Cordova 应用程序。当我将它部署到我的 Windows Phone 8.1 设备时，文本非常小，比在同一设备上的浏览器中小得多。我现在创建了一个只显示一行文本的迷你应用程序，这里也是，Cordova 应用程序中的文本很小，如果我在同一部手机的浏览器中运行它，文本大小正常。

我尝试将其创建为 Windows Phone 8 应用程序，然后文本大小合适。

我玩过视口元标记，没有改变任何东西。

【问题讨论】：

标签： javascript cordova windows-phone-8.1 windows-phone visual-studio-cordova

【解决方案1】：

您可能会遇到一个问题，即某些 Web 框架在设备的有效宽度为 768 像素时进入“iPad 模式”。这是 Twitter 引导程序的常见问题。

虽然您需要检测 IE 11 而不是 10，但建议了一些修复，例如这个：https://timkadlec.com/2013/01/windows-phone-8-and-device-width/

【讨论】：

谢谢 Chuck，这对我帮助很大。但是首选解决方案不起作用，请参阅我对 Markus 的回答。

【解决方案2】：

Windows Phone 实现中存在一个错误，它没有以正确的方式计算视口的大小。这在 Windows Phone Update 3 (8.0.10512) 中已修复，但不幸的是，Nokia Lumia 920 没有。因此，推荐的workaround 是添加以下脚本：

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement("style");
  msViewportStyle.appendChild(
    document.createTextNode("@-ms-viewport{width:auto!important}")
  );
  document.getElementsByTagName("head")[0].
    appendChild(msViewportStyle);
}

如果您正在构建一个 Cordova 应用程序，将样式添加到 Windows Phone 的样式表就足够了：

@-ms-viewport { 
  width: auto !important;
}

【讨论】：

不幸的是，这个“自动”不起作用。如果我将“auto”替换为“320px”，两种解决方案都可以工作。
但老实说，因为我不完全理解这个视口的东西，所以我不完全知道我在做什么。我的 Lumia 730 的宽度为 720 像素。 screen.width 和 window.innerWidth 为 450 像素。当我将视口宽度设置为 320 像素时，我得到了想要的结果，但当我将其设置为 420 像素时却没有？我很困惑...