Question

我希望在

时构建一个webAPP并显示不同的内容

用户通过Safari浏览器打开webAPP 或
当他们通过主屏幕的网络剪辑打开webAPP时

检测工作 - 我用document.write检查它 - 但CSS显示属性没有改变。 我做错了什么？

先谢谢！

<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
    if (window.navigator.standalone == true) {
        // document.write('<p>homescreen<\/p>');
        document.getElementById("homescreen").style.display = 'block';
    }else{
        // document.write('<p>safari<\/p>');
        document.getElementById("safari").style.display = 'block';
    }
}else{
        // document.write('<p>no iOS<\/p>');
        document.getElementById("ios").style.display = 'block';
}
</script>
</head>
<body>

<div id="homescreen" style="display:none;">
you opened it from the homescreen
</div>

<div id="safari" style="display:none;">
you opened it from safari
</div>


<div id="ios" style="display:none;">
you have no iOS
</div>



</body>
</html>

Answer 1

在加载DOM之前评估<script>，因此document.getElementById("xx")返回undefined。检查你的javascript错误控制台，可能有一个错误，如：“未捕获的TypeError：无法读取属性'样式'的null”。

将<script>区块移至身体末端

更好的是，使用jQuery等，请参阅http://api.jquery.com/ready/

$(function() {
  if (window.navigator.userAgent.indexOf('iPhone') != -1) {
    if (window.navigator.standalone) {
      $('#homescreen').show();          
    }else{
      $('#safari').show();
    }
  }else{
    $("#ios").show();
  }
});

或者更好，更灵活的替代方法是将类附加到<body>元素，然后您可以使用CSS轻松显示/隐藏任何内容。

$(function() {
   if (window.navigator.standalone) {
     $('body').addClass('standalone');
   }
});

然后在CSS中，可以根据这些标识符轻松显示/隐藏所有部分。

.someContent { display: none; }
body.standalone .someContent { display: block; }

对于移动选择器（iPhone），您甚至可以避免使用JS userAgent切换器（仅供参考，您的indexOf与iPad或iPod Touch不匹配）并且更好地依赖于@media only screen and (max-device-width: 480px)等CSS媒体查询（这个是用于iPhone风景和肖像）。

如果用户在iPhone和iPad上，则在userAgent时更改css显示window.navigator.standalone == true

1 个答案: