iPhone向けSafari専用のあれこれ。

自分用メモ。

iPhone向けSafariでのみ使える拡張属性

属性名 使用可能 説明
autocapitalize on / off input
textarea
文頭文字の大文字化機能の
On/Off
autocorrect on / off input
textarea
オートコレクト機能の
On/Off
ongesturechange [JavaScriptコード] ほぼ全てのタグ マルチタッチによる画面操作中に位置が移動したときに実行するスクリプト
ongestureend [JavaScriptコード] ほぼ全てのタグ マルチタッチによる画面操作が終了したときに実行するスクリプト
ongesturestart [JavaScriptコード] ほぼ全てのタグ マルチタッチによる画面操作が開始したときに実行するスクリプト
onorientationchange [JavaScriptコード] body 端末の向きが変化したときに実行するスクリプト
ontouchcancel [JavaScriptコード] ほぼ全てのタグ 画面タッチがキャンセルされたときに実行するスクリプト
ontouchend [JavaScriptコード] ほぼ全てのタグ 画面タッチ中に指が離れたときに実行するスクリプト
ontouchmove [JavaScriptコード] ほぼ全てのタグ 画面タッチ中に位置が移動したときに実行するスクリプト
ontouchstart [JavaScriptコード] ほぼ全てのタグ 画面タッチが開始したときに実行するスクリプト

ongestureから始まる属性

ongestureから始まる属性は、複数の指による画面操作(ジェスチャー)を行った際に実行されるイベントハンドラ。

<img src="images/example.jpg" ongesturestart="function();">

みたいな感じで使う模様。

onorientationchange属性

iPhoneを横向きや縦向きに変更したときに実行されるイベントハンドラ。

<body onorientationchange="function();">  

こう書くより良いのかな…?

window.onorientationchange = function () {
 switch ( window.orientation ) {
  case 0:
   break;
  case 90:
   alert('横向きには対応していません');
   break;
  case -90:
   alert('横向きには対応していません');
   break;
 }
}

ontouch属性

マウスで言うところの「onmousemove」とかそういうのっぽい。

<img src="images/rectangle.gif" ontouchstart="function();">  

iPhone向けSafari専用のmetaタグ

metaタグのname属性 content属性 説明
apple-mobile-web-app-capable yes フルスクリーンモードを指定する
apple-mobile-web-app-status-bar-style default / black /
black-translucent
ステータスバーの表示を制御する
format-detection telephone=no キーワード認識機能を制御する
viewport width=device-width など多数 論理ウィンドウサイズを指定する

Safariから「ホーム画面に登録」したあと、そのアイコン(ブックマーク)からページにアクセスすると、Safariのステータスバーなどが一切表示されないので、まるでネイティブアプリみたいになるので、こいつは特に捗るかも。

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

Mobile Bookmark Bubbleと組み合わせるとけっこういいかも。

「iPhone向けSafari専用のあれこれ。」への1件のフィードバック

コメントは停止中です。