0

I am using Angular and I am doing a Mobile App where I am including a spinner which is a loader, is an SVG, the thing here: that SVG is not been displayed on some Android versions, in iPhone, works great, but not in Android, so what I want to do: detect the OS and depending on that display the SVG or just an image that I have in my project.

this is the 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>

so what do you recommend ?

Non
  • 8,409
  • 20
  • 71
  • 123

2 Answers2

1

I believe you should follow the following steps:

  1. Check the value of navigator.userAgent with each version where you do not want to display the svg

  2. Make a list of key texts present in the values to be excluded (a black list)

  3. If navigator.userAgent does not correspond to any pattern in the blacklist, then show the svg

  4. Test on as many devices as possible

Read this to get some more information.

Community
  • 1
  • 1
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
0

I recommend platform.js, it does good work detecting various client platform data, saves you do that manually yourself :).

NenadP
  • 585
  • 7
  • 24