如何根据操作系统显示元素？

Question

我正在使用Angular，我正在做一个移动应用程序，其中包括一个spinner，它是一个加载器，是一个SVG，这里的事情：SVG没有在某些Android版本上显示，在iPhone中，效果很好，但不是在Android中，所以我想做的是：检测操作系统，并根据显示SVG或我在项目中的图像。

这是SVG

<div>{{spinnerTitle}}</div>
<svg class="spinner" width="60px" height="80px"
     viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none"
            stroke-width="6" stroke-linecap="round"
            cx="33" cy="33" r="30">
    </circle>
</svg>

所以你推荐什么？

Answer 1

我相信您应该按照以下步骤操作：

1. 使用您不希望显示svg的每个版本检查navigator.userAgent的值

2. 列出要排除的值中的关键文本列表（黑名单）

3. 如果navigator.userAgent与黑名单中的任何模式不对应，请显示svg

4. 在尽可能多的设备上进行测试

阅读this以获取更多信息。

Answer 2

我推荐platform.js，它可以很好地检测各种客户端平台数据，保存您自己手动执行的操作:)。