iOS Web应用程序 - 仅在添加到主屏幕时显示内容？

Question

我以前见过这个"解决方案",但有一个重大缺陷!

这就是我想要实现的目标;

我有一个网络应用程序,要求用户登录才能使用它.出于各种原因,我不希望它在常规Safari中使用,只能通过主屏幕(从美学角度来说,它只在全屏时才"正常").

因此,当用户浏览网站时,它应检测是否已通过主屏幕打开(在这种情况下显示登录页面)或常规的Safari(在这种情况下,它会显示一个启动画面,邀请查看者将其添加到他们的主屏幕).

我可以成功检测它是通过主屏幕打开还是现在(使用window.navigator.standalone)打开,但是我遇到的所有解决方案都涉及将用户重定向到不同页面(如果没有通过主屏幕打开).这个问题是用户会将错误的页面加入书签(或添加到主屏幕).据我所知,没有办法指定一个不同的页面添加到主屏幕.

我尝试了以下,似乎没有用;

/* Added to login page head */
$(document).ready()
        if (window.navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.navigator.standalone == true) {
                initialize();
            }else{
                $('.container').load('/install.cfm')
            }
        }else{
            $('.container').load('/install.cfm')
        }

编辑:根据@ scunliffe的评论,我现在尝试了以下,这也行不通(jQuery是在脚本执行之前加载的,所以这应该不是问题);

if (window.navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.navigator.standalone == true) {
                $('#logindiv').show;
            }else{
                $('#installdiv').show;
            }
        }else{
            $('#installdiv').show;
        }

Answer 1

你可以改变你的逻辑,以便登录页面是默认的,但如果用户在iphone/iOS设备上？如果没有独立运行,他们会得到一条消息？

$(document).ready(function(){
    if(navigator.userAgent.indexOf('iPhone') != -1){//test for other iOS devices?
        if(window.navigator.standalone == true){
            //do stuff!
            initialize();
        } else {
            //show message telling user to add to their home screen...
        }
    } else {
        //show message that this must be run on device X/Y/Z...
    }
});

更新:

根据您更新的示例,您只需修改代码即可将show/hide称为方法.

$(document).ready(function(){
  if(window.navigator.userAgent.indexOf('iPhone') != -1){
    if(window.navigator.standalone == true){
      $('#logindiv').show();
    } else {
        $('#installdiv').show();
    }
  } else {
    $('#installdiv').show();
  }
});

和

<div id="logindiv">
  ...stuff to login here...
</div>
<div id="installdiv">
  ...note to install here...
</div>