javascript - 检测 iOS-WebApp 并更改 CSS 属性

Question

我知道有几个关于这个问题的主题，但我找不到适合我的解决方案。

所以这是我的问题:
当我的网站从移动设备加载时，它是响应式的并显示一个信息框。此信息框显示指向如何将网站另存为 WebApp 的教程的链接。当用户从 WebApp 加载网站时，信息框应该被隐藏。

这是我正在使用的代码(不工作):

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

信息框的 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>

“!important”标签是必需的，因为我使用的是 Twitter 的 BootStrap，他们已经定义了一个子属性(显示)作为 !important。

提前致谢。

Answer 1

好的，在搜索网络并测试各种组合后，我找到了解决方案:

<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>

上面的脚本使用以下代码自动关闭警告框:

<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>

希望能帮到有类似问题的人。