检测 iOS-WebApp 并更改 CSS 属性

Posted 2023-03-14

【中文标题】检测 iOS-WebApp 并更改 CSS 属性

【英文标题】：Detecting iOS-WebApp and changing CSS attribute

【发布时间】：2014-06-14 14:51:37

【问题描述】：

我知道有几个关于这个问题的主题，但我找不到适合我的解决方案。 所以这是我的问题： 我的网站是响应式的，并在从移动设备加载时显示一个信息框。此信息框显示了如何将网站保存为 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。 提前致谢。

【问题讨论】：

当您尝试更改其css 时，您的javascript 是否位于页面末尾以确保alertbox 在DOM 中可用？或者，如果您已经包含 jQuery，则可以使用一些 DOM ready 回调。

感谢您的提示，在包含 bootstrap.js 文件后，我将脚本从 移到了 html 的末尾，但它仍然不起作用。您能否解释一下“DOM 就绪回调”是什么意思？我对 JavaScript 完全陌生。

【参考方案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>

我希望我可以帮助可能有类似问题的人。

【参考方案2】：

也许这就是你的答案？ Determine if user navigated from mobile Safari

我希望这能解决你的问题。

【讨论】：

感谢您的回答，但这对我不起作用。要么我对 CSS 命令做错了，要么没有正确添加“！important”标签。

@Aeon 在这种情况下，请在 if 条件中尝试一些 alert('hi');，而不是更改 css。所以你可以确定条件是否有效。

我试过了。我在 CSS 命令之前和之后添加了一条消息，但只显示第一条消息。似乎CSS是错误的。有什么想法吗？