apple-touch-iconなどの特殊なmetaタグを出力したい場合などの記述方法。
echo $this->Html->meta('apple-touch-icon-precomposed', '/img/apple-touch-icon-144x144.png', [
'type'=>'icon',
'size' => '144x144',
'rel'=>'apple-touch-icon-precomposed'
])."\n";
echo $this->Html->meta('apple-touch-icon-precomposed', '/img/apple-touch-icon-114x114.png', [
'type'=>'icon',
'size' => '114x114',
'rel'=>'apple-touch-icon-precomposed'
])."\n";
こんな感じ。
※第1引数は既知のmetaタグ出ない場合、どこにも出力されない。
メモ。
iOS7はスタンドアローンモードでWebページを起動すると、ステータスバーが真っ黒になってしまい、インジゲーター類がすべて非表示になってしまう問題？がある。
これを解決するためには下記のmetaタグをhead要素内に追加してやる必要がある。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
このプロパティはステータスバーのデザイン変更するために用意されているもので、contentの部分に指定する値を変更すればデザインが変更される。
今回はblackを指定することでインジゲーターの表示を復活させているが、指定できる値は「default」、「 black」、「black-translucent」の3つがある。
メモ。
head要素内に下記のmetaタグを追加すれば良い。
<meta name="apple-mobile-web-app-capable" content="yes" />
このモードを利用する際は、サイト内移動をjavascriptでの繊維にしないとリンクをクリックした際にsafariが起動してしまう可能性があるので注意が必要。
かなり便利なライブラリを見つけたのでメモ。
http://cubiq.org/add-to-home-screen
これを使うとデバイス、OS、言語を自動判定して適切なメッセージを自動で表示してくれる。ガチでマジで超絶便利な神ライブラリ。
ユーザーごとに表示回数や表示頻度の管理も行えて、毎回表示されて糞うざい！といった現象も回避できる。
加えてmetaタグの「apple-touch-icon-precomposed」もしくは「apple-touch-icon」を設定していると、それを自動検出してそのアイコン画像をポップアップ内に表示してくれたりもする。
これは最強ですわ。
通常bootstrapのモーダルはHTMLのdata属性に特定の値を記述して動作をバインディングするが、任意の要素や挙動を設定したい場合は下記の通りスクリプトを記述すればよい。
// modal()メソッドを呼び出した瞬間モーダルが起動する。
$('#target').modal({
backdrop: 'static'
});
上記はモーダル起動した時、窓の外をクリックされてもモーダルが閉じないようにするためのオプション。
発火タイミングはクリックなりオンロードなりお好みでどうぞ。
ようはホームスクリーンに追加したアイコンから起動されているかどうかを判定する。
if(window.navigator.standalone) {
// スタンドアローンモード時の挙動
}
JS実装なのでロード量は減らないがページ遷移が無い分展開は高速。
※あたりまえだね。
http://jedfoster.com/Readmore.js/
デザインだけスッキリさせたいときとか、用途によっては便利かも。