0

我有一个 Rails 应用程序，它使用响应式 Boostrap 布局来缩小移动设备。我想要一个启动画面并隐藏 iphone 上的任务栏

我有以下代码：

<head>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "KegTracker" %></title>
    <%= csrf_meta_tags %>

    <!-- iPhone -->
    <link href="/assets/apple-touch-startup-image-320x460.png"
          media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 1)"
          rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <link href="/assets/apple-touch-startup-image-640x920.png"
          media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">
    <!-- iPhone 5 -->
    <link href="/assets/apple-touch-startup-image-640x1096.png"
          media="(device-width: 320px) and (device-height: 568px)
             and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
    <![endif]-->

    <%= javascript_include_tag "application" %>
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
    <%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
    <%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
    <%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
    <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>


    <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDh4VYHZ56mUlwkE6gE16cDRxCaCLjJQE&sensor=false">
    </script>
    <script type="text/javascript"
    src="http://jawj.github.com/OverlappingMarkerSpiderfier/bin/oms.min.js">
    </script>

  </head>

所有图像都正确链接。触摸图标工作正常，但 touch-startup-image 和 apple-mobile-web-app-capable 标签在运行 6.1 的 iPhone 4S 上的 Safari 或 Chrome 上似乎根本不起作用

有没有人有任何想法？Bootstrap 是否覆盖了标签？

4

1 回答 1

0

正如 Justinavery 所说，您必须添加到主屏幕才能使其正常工作，然后单击该图标。

此外，要使所有链接在生成的“无头视图”内工作，您需要将这段 JS 添加到您的代码中。

<!-- to stop the links loading in another window -->
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

取自这里

于 2013-02-08T00:27:59.160 回答