0

I've just made my webpage capable to be a web app, but now I am trying to have a separate page only for when it is a web app. I've looked around on discussions.apple.com and developer.apple.com and really just anywhere and I can't see a solution. Is there anyway I can have a separate page? If not what about separate pages for tablet/phone and PC? I haven't found any that have worked. I am a noob so please keep it all on just the html page.

EDIT: Is there a way to redirect if it is a Web App? Can you detect it somehow? What would the code be?

Here is my head:

    <head>
    <title>Web App</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><!    [endif]-->
    <link rel="stylesheet" href="assets/css/main.css" />
    <noscript><link rel="stylesheet" href="assets/css/noscript.css" />    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><!    [endif]-->
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

<meta name="apple-mobile-web-app-capable"
      content="yes">

<meta name="mobile-web-app-capable"
      content="yes">

<!-- Make the app title different than the page title. -->
<meta name="apple-mobile-web-app-title"
      content="Ben's Site!">

<!-- Configure the status bar. -->
<meta name="apple-mobile-web-app-status-bar-style"
      content="black-translucent">

<!-- Set the viewport. -->
<meta name="viewport"
      content="initial-scale=1">

<!-- Disable automatic phone number detection. -->
<meta name="format-detection"
      content="telephone=no">

<style>
  html {
    -webkit-text-size-adjust: 100%;
  }
</style>
<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>
</head>

I have js in there just so I can keep pages for opening in Safari.

Thanks!

Ben Jones
  • 1
  • 1
  • Can you elaborate a bit on what you mean by "separate page"? Do you want the appearance to be different or the content or you want a completely separate, unrelated page? In any case, it will boil down to detecting whether your website is rendered full screen and then adjusting (or perhaps redirecting) accordingly. – fstanis Oct 16 '16 at 02:51
  • Well yeah. I would like different content if it is just on the web app. Is there a way to detect if it is (like, as you said, full screen)? – Ben Jones Oct 17 '16 at 20:19
  • I've made an edit that might help explain it. – Ben Jones Oct 17 '16 at 20:22

0 Answers0