Detecting iOS-WebApp and changing CSS attribute

Question

I know there exist several topics about this problem but I couldn't find a solution which works for me.

So here is my problem:
My website is responsive and shows an info-box when it's loaded from a mobile device. This info-box shows a link to a tutorial how to save the website as WebApp. When the user loads the website from a WebApp the info-box should be hidden.

Here's the code I'm using (not working):

<script type="text/javascript">
  if (window.navigator.standalone == true) {
    document.getElementById('alertbox')[0].style.display = 'none !important';
  }
</script>

The info-box has the ID "alertbox":

<div id="alertbox" class="alert alert-info visible-phone">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This website supports iOS-WebApps. Learn more <a href="/guides/ios-webapp">how to save this website as WebApp</a>.
</div>

the "!important" tag is neccessary because I'm using Twitter's BootStrap and they defined a sub-attribute (display) already as !important.

Thanks in advance.

Answer 1

Alright after searching the web and testing various combinations I've found the solution:

<script type="text/javascript">
  if (navigator.userAgent.match(/(iPod touch|iPhone|iPad|CriOS)/i)) {
    if (window.navigator.standalone == true) {
      //iOS WebApp
      $(".alert").alert('close');
    }
    else {
      //iOS Safari/Chrome
    }
  }
  else {
    //other browser
    $(".alert").alert('close');
  };
</script>

The script above automatically dismisses the alertbox with this code:

<div id="alertbox" class="alert alert-info visible-phone">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This website supports iOS-WebApps. Learn more <a href="/guides/ios-webapp">how to save this website as WebApp</a>.
</div>

I hope I could help the people who might have a similar problem.