0

レスポンシブな Boostrap レイアウトを使用してモバイル用にスケールダウンする Rails アプリがあります。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>

すべての画像が正しくリンクされています。タッチ アイコンは正常に動作しますが、6.1 を実行している iPhone 4S の Safari または Chrome では touch-startup-image タグと apple-mobile-web-app-capable タグがまったく動作しないようです。

誰かアイデアはありますか？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 に答える