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.

Is your javascript at end of the page to make sure `alertbox` is available in `DOM` at the time you are trying to change its `css`? Or may be use some `DOM ready` callback if you have `jQuery` already included. — sabithpocker, Jun 14 '14 at 15:11
Thanks for the hint, I moved the script from the to the end of the html after including the bootstrap.js file but it still doesn't work. Could you please explain me what you mean with the "DOM ready callback" ? I'm completely new to JavaScript. — Aeon, Jun 14 '14 at 15:21

Aeon · Accepted Answer · 2014-06-18T16:57:54.850

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.

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

maybe this is your answer? Determine if user navigated from mobile Safari

I hope this solves your answer.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 14 '14 at 15:59

Zezura

128
1
9

Thanks for your answer but this doesn't work for me. Either I did something wrong with the CSS command or the "!important" tag doesn't get added correctly. – Aeon Jun 14 '14 at 16:04
@Aeon In that case try some `alert('hi');` inside the if condition instead of changing the `css`. So you can be sure if the condition is working. – sabithpocker Jun 14 '14 at 17:02
I've tried that. I added a message before and after the CSS command but only the first message shows up. Seems like the CSS is wrong. Any ideas? – Aeon Jun 14 '14 at 17:17

Detecting iOS-WebApp and changing CSS attribute

2 Answers2