离子框架：在 Android 设备上测试应用程序时，应用程序的文本模糊

Question

我刚刚受到了巨大的欺骗！ 我刚刚完成了我的应用程序的第一个版本，所以我继续在我的 Android 设备上测试它......应用程序的内容是模糊的！

您可以在屏幕截图上看到它。 列表中的文本似乎未正确显示。 还可以看到保存按钮有点变形。

它从何而来？

好吧，我注意到我使用 style.css 自定义的应用程序元素看起来很模糊，而属于 Ionic 框架的元素显示正确。 问题可能来自这里，因为它可能来自完全不同的东西，老实说，我不知道。

我怎样才能解决这个问题？

漂亮请！

谢谢！

PS：截图实际上比它在应用程序中的样子要模糊一些。

编辑：

#test{
color: white;
margin-top: 5px;
}
#location{
float: left;
}
#timeIn{
text-align: right;
color: red;
}
#timeOut{
text-align: right;
color: green;
}
#check{
display: block;
}

Answer 1

我遇到了同样的问题，它只发生在使用远程主机的开发过程中。 通过不使用--livereload标志来确认来测试它。

希望它可以帮助别人。

Answer 2

这与字体渲染有关。 无关与--livereload

您可以使用 CSS 中的字体平滑来绕过它，通过浏览器/webview 或通过其他方式强制它。

我的建议是启用抗锯齿 CSS：

 -webkit-font-smoothing: antialiased;
 -font-smoothing: antialiased;

..另一方面，如果启用子像素/抗锯齿，离子似乎会自动切换到“ios”模式。 去搞清楚 ：）