iPhone Safari 用のサイトを作っていて困ったこと&はまったこと

iPhone Safari ではまったこと

「うーん?」ってなったことをまとめて書きます

Android ブラウザではまったことは、こちら -> JavaScript/Androidブラウザ/はまったこと


webkitTransform の webkitTransformOrigin?

(はまった1) 基準点の設定

「element.style.webkitTransformOrigin?」を設定すると、回転や拡大するときの基準点を設定できる。
これを 0, 0 にするのか、50%, 50% にするのか決めてから実装しないと、「うーん?」ってなる。

サンプル


audio タグ

(はまった2) iPad の audio タグ

コントロールのスライダーを最後まで移動すると、タップできなくなる

iOS4.2 だと、iPhone と同じく「コントールのスライダーを最後まで移動すると、消える」ようになりました

(はまった3) iOS4 以降の audio タグ

コントールのスライダーを最後まで移動すると、消える

(はまった4) load をしてから play をする

load をしてから play をしないと、再生されないので、ちゃんとする。

var audio = document.createElement("audio");
document.body.appendChild(audio);
audio.setAttribute("src", "sample.aiff");
audio.setAttribute("controls");
// コメントにしてあるけど、ちゃんと load する
//audio.load();
audio.play();

iOS4.0 のとき

load をしないで play をしてしまったときに、iOS4.0 だと、"Loading" となる。

iPhoneSafariAudio1.png


iOS4.1 のとき

iPhoneSafariAudio2.png


サンプル


mailto

(はまった5) iPhone OS 3

mailto を使ってメール画面を開いたあと、setInterval が再開されない。
iOS4 以降と iPad では、ちゃんと再開される。

サンプル


iframe のスクロールバー

(はまった6) iframe のスクロールバー

スクロールが表示されずに、中身が全て表示される。
ので、スクロールバー使わずに、touch イベント取得して実装するほうがよいのかな。

Safari で見るとこんな感じ。

iPhoneSafariIframePC.png


iPhone (iOS4.1) で見るとこんな感じ。

iPhoneSafariIframe.PNG


ただ、iPhone シュミレーター(iOS4.1)だとこんな感じで、全部中身は表示されていないがスクロールバーはない。

iPhoneSafariAudio4.png


サンプル


iframe 内でのイベント

(はまった7) iOS4.1 の iframe 内のイベント

iOS4.0 までは、iframe 内に touch イベントを設定しても、
ちゃんと、touchstart → touchmove → touchend と順番にイベントを取得することができていた。 iOS4.1 では、touchstart → touchmove → touchend の順番にイベントがとんでこない...。

親 … 親の html
子 … iframe 中の html

iOS4.0 のときイベントが取得できていたのに。。

iOS4.2 にアップデートしたらイベントが取得できるようになりました

実験サンプル1

子の touchend が取得できない。


iPhoneSafariIframe1.png


実験サンプル2

サンプル1 を改良し、子でも touchend が取得できるようにした。
(親の touchstart が呼ばれたときに、子の touchend を呼ぶようにした)
しかし、e.preventDefault の設定をしていないため、touchmove のときに Safari のスクロールが有効になっている。


iPhoneSafariIframe2.png


実験サンプル3

サンプル2 を改良し、子のイベントの中に e.preventDefault を設定し、Safari のスクロールが効かないようにした。
しかし、touchstart して touchmove して touchend 後、画面をもう一度タッチしても touchstart が取得できない。

iOS4.0

iPhoneSafariIframe4.0-3.png


iOS4.1

iPhoneSafariIframe4.1-3.png


最終的にこうなった

以下の実験サンプル3 を改良し、子でもイベントが取得できるようにした。


iPhoneSafariIframe4.png


イベントこんなん?

iPhoneSafariiFrameEvent.JPG


サンプル


document.body.scrollTop

ちょっと確信がもてませんが。

  • iOS4.2 以前 … うまく取得できてない気がする。。0 が返ってくるような。。
  • iOS4.2 以降 … ちゃんと取得できるようになった?


Comment



Counter: 18304, today: 3, yesterday: 0

添付ファイル: fileiPhoneSafariIframePC.png 1096件 [詳細] fileiPhoneSafariiFrameEvent.JPG 1179件 [詳細] fileiPhoneSafariIframe4.1-3.png 1092件 [詳細] fileiPhoneSafariIframe4.png 1128件 [詳細] fileiPhoneSafariIframe4.0-3.png 1089件 [詳細] fileiPhoneSafariIframe4.0.png 697件 [詳細] fileiPhoneSafariIframe2.png 1096件 [詳細] fileiPhoneSafariIframe.PNG 1093件 [詳細] fileiPhoneSafariIframe1.png 1102件 [詳細] fileiPhoneSafariAudio4.png 1100件 [詳細] fileiPhoneSafariIframe-4.0.png 695件 [詳細] fileiPhoneSafariAudio2.png 1101件 [詳細] fileiPhoneSafariAudio1.png 1089件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-09-24 (火) 14:56:10 (1336d)