18

SO sourceをのぞいてみると、次のタグに気付きました。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

簡単なGoogleがホームページに表示するためのAppleの「ファビコン」タイプのものを明らかにした後、これはどれですか（正確には「WebClipブックマーク」）。

頭に浮かぶ唯一の他のものは次のとおりです。

<input type="search" results="5"/>

代替テキスト
(出典: alexking.org )

この type="search" により、フィールドは Apple 検索アイコンを「継承」し、オプションの results="x" を使用すると、「x」個のキーワードの履歴を維持できます。

したがって、私が知らない Apple/Safari (iPhone/iPod Touch) 固有の HTML タグと属性が他にあるのではないかと考えています。好奇心旺盛な人は知っておく必要があります！

4

6 に答える 6

17 
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

幅、高さ、スケールの値を設定できます

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

ステータスバーのスタイルを設定します。かなり自明です。

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

マークが前述したように、そしてdaringfireball.netリンクで説明されているように、サファリを介してではなく、フルスクリーンモードでWebページを実行することができます。

サポートされており、ここに文書化されている他のさまざまな属性があります：https ://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

于 2008-12-22T22:54:02.043 に答える
9

私が見たいくつかの新しいものを使って、私自身の答えを追加したいと思いました。

1.) 高解像度の iPhone 4 Retina ディスプレイ アイコンを提供するオプションがあります。

<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>

2.) iPhone/iPod/iPad がアプリ アイコンに配置するデフォルトの光沢のあるオーバーレイが多すぎる場合は、rel 属性に「precomposed」を追加して、追加しないように要求できます。

<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />

3.) 電話/SMSテキストメッセージ用のiPhoneリンクに、目的のアクションを直接実行させることができます

<a href="tel:01234567890">Call us</a>
<a href="sms:01234567890">Text us</a>

4.) HTML タグではありませんが、向きに基づいて CSS を切り替えるための便利なオプションです。

<script type="text/javascript">
  function orient(){
    switch(window.orientation){
      case 0:
        document.getElementById("orient_css").href = "css/iphone_portrait.css";
        break;
      case -90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
      case 90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
    }
  }
  window.onload = orient();
</script>

5.) オリジナルの 4 倍のピクセルをサポートする iPhone 4 の Retina ディスプレイ用の特別な CSS スタイルシートを提供できます。

<link rel="stylesheet" type="text/css" href="../iphone4.css"
   media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

この追加情報については、 24 通りの方法で@Sarah Parmenter に感謝します。

于 2010-12-31T22:47:27.707 に答える
4

単一目的の Web アプリケーションの便利なヘッダー タグは、apple-mobile-web-app-capableです。ユーザーがサイトのホーム画面のショートカットを作成すると、通常の Mobile Safari アプリケーションとは別に、URL バーやその他のクロムなしで「フルスクリーン」モードで起動します。サイトが適切に設計されていれば、ネイティブの iPhone アプリのように感じることができます。

于 2008-12-22T21:03:10.537 に答える
3

上記のドキュメントは移動しました。これらは新しい場所です。

Safari HTMLリファレンス： https ：//developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/

Safari Webコンテンツガイド： https ：//developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/

于 2009-09-16T10:05:22.280 に答える
2

@scunliffe私はあなたの方向スイッチをさらに一歩進めました：

function orient(o){
  switch(o){
    case -90:
    case 90: 
      $('#container').removeClass().addClass('landscape');
    break;
    default:
      $('#container').removeClass().addClass('portrait');
    break;
  }
}
于 2011-03-15T04:45:21.517 に答える
1

結局のところ、それらはたくさんあります！

これは興味深いものでした：

Web サイト全体 (Web サイトのすべてのページ) のアイコンを指定するには、apple-touch-icon.png または apple-touch-icon-precomposed.png という名前のルート ドキュメント フォルダーに PNG 形式のアイコン ファイルを配置します。ファイル名として apple-touch-icon-precomposed.png を使用すると、iPhone の Safari はアイコンに効果を追加しません。

precomposed は iPhone OS 2.0 以降で利用できます

DaringFireball リンク Marc は、Safari Web コンテンツ ガイドへのリンクを共有しました。Andy が述べたように、サインアップする必要がありますが、無料で簡単です (OpenID ほど簡単ではありませんが、近いです)。

Safari Web コンテンツ ガイド

于 2009-01-01T19:10:12.177 に答える