Hide Safari User Interface Components

  • Hi,

    Would it be possible for WordPress to allow the developer to “Hide Safari User Interface Components”? This would be EXTREMELY useful for future design. The direction of design is, without a doubt, already headed to Responsive Design and the major design element is no longer the desktop computer but the mobile web.

    Being able to “Hide Safari User Interface Components” would allow for an extra 25px space on the iPhone. That’s quite a bit. Please add this feature.

    There is a method that works for ‘Non-Wordpress’ websites:

    Apply;

    target = “webapp”

    to all links on the website.

    I’m looking for a solution to be able to apply this technique to my WordPress site to hide the safari user interface components.

    Thank you.
    G.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    ?????? Advisor and Activist

    Nice way to use buzzwords without explaining what they are to the rest of us… ??

    From https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    This is the perfered method:
    <meta name="apple-mobile-web-app-capable" content="yes" />

    And it’s a theme change for sure. Not everyone wants to. Not every theme would look good that way.

    Thread Starter glepage

    (@glepage)

    Buzz buzz buzz.. ??

    Yes, the <meta name=”apple-mobile-web-app-capable” content=”yes” /> method is the method that needs to be used but more is needed.

    The reason is:
    As soon as the user clicks on any link when the WordPress theme is in ‘webapp’ mode, the clicked link will open in ‘mobile safari’ unless the link contains a target=’webapp’ statement in the href.

    I don’t have a solution to globally place the ‘ target=”webapp” ‘ to make the above method work.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    There’s a way to do it outside of WordPress, but I’m not really happy with it. Many (most) users won’t be able play with Apache modules and if you’re not careful you can bork your Apache web configuration.

    In plain English, you could easily break your webserver if not careful. 8|

    I’m not sure it’s selective enough or will work at all and requires an Apache mod_substitute and the following configuration file.

    <IfModule mod_substitute.c>
<Location />
        AddOutputFilterByType SUBSTITUTE text/html
        Substitute 's/<a href="/<a target="webapp" href="/'
</Location>
</IfModule>

    That’ll substitute plain all <a href=" with <a target="webapp" href=".

    Just that alone didn’t work on the iPhone or iPad and the safari controls were still there.

    Thread Starter glepage

    (@glepage)

    Thanks. I’ll try that along with <meta name=”apple-mobile-web-app-capable” content=”yes” /> in the header and see if that works.

    Ultimately, this would Be best as a plugin. I suspect this is something that is needed from now on as the amount of pixels lost to the ‘Safari User Interface Components’ are substantial.

    Thanks again. ??

    Hi glepage,

    Have you figured out a work around for this? I am running into the same issue. I have scoured the net and haven’t found a solution.

    I also put “<meta name=”apple-mobile-web-app-capable” content=”yes” />” in my header.php file and I would assume this would then apply to all the pages, and it doesn’t, when a link is clicked, it opens up a new browser window with the browser bars.

    However, the meta tag above does work on the initial load of the site, from the home screen icon that I make (meaning the browser bars are gone) but again, when clicking a link it opens a new window with the bars again. It’s as if the meta tag removing them doesn’t apply to the other pages, but it is added in the header.php which does load on the pages I am clicking, as far as I know, so it’s not registering for some reason.

    Any additional help on this topic would be much appreciated! I’ve the bars gone on the Financial Times webapp and I wonder how they did it. https://apps.ft.com/ftwebapp/ – Of course, I’m assuming they are not using WordPress though.

    Thank you very much for any help, anyone who might know!

    Jake

    Thread Starter glepage

    (@glepage)

    @jacob,

    Unfortunately no.. I didn’t find a solution. My solution was to change the entire website to be a “Responsive Design” so that this would be totally irrelevant. We’re still in the process of doing so.

    If you find a solution, please let me know.
    Cheers.

    For keeping the user within the webapp try this:

    <script type="text/javascript">
        (function(document,navigator,standalone) {
            // prevents links from apps from oppening in mobile safari
            // this javascript must be the first script in your <head>
            if ((standalone in navigator) && navigator[standalone]) {
                var curnode, location=document.location, stop=/^(a|html)$/i;
                document.addEventListener('click', function(e) {
                    curnode=e.target;
                    while (!(stop).test(curnode.nodeName)) {
                        curnode=curnode.parentNode;
                    }
                    // Condidions to do this only on links to your own app
                    // if you want all links, use if('href' in curnode) instead.
                    if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                        e.preventDefault();
                        location.href = curnode.href;
                    }
                },false);
            }
        })(document,window.navigator,'standalone');
    </script>

    I found it here: https://gist.github.com/kylebarrow/1042026#comment-37145 and it works like a charm…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Hide Safari User Interface Components’ is closed to new replies.