*iPhone Safari 用のサイトを作っていて困ったこと&はまったこと [#yab6632c]
#contents2_1(compact=true,depth=1-2)

*iPhone Safari ではまったこと [#f5411bb3]
「うーん?」ってなったことをまとめて書きます

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

&br;
*webkitTransform の webkitTransformOrigin [#da33b77f]
**(はまった1) 基準点の設定 [#ma27f31e]
「element.style.webkitTransformOrigin」を設定すると、回転や拡大するときの基準点を設定できる。&br;
これを 0, 0 にするのか、50%, 50% にするのか決めてから実装しないと、「うーん?」ってなる。

***サンプル [#o1bea364]
-[[50% 50% にした場合のサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#GestureScale]]
-[[0 0 にした場合のサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#GestureScale00]]


&br;
*audio タグ [#d214eb38]
**(はまった2) iPad の audio タグ [#he915d91]
コントロールのスライダーを最後まで移動すると、タップできなくなる

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

**(はまった3) iOS4 以降の audio タグ [#ef0ce977]
コントールのスライダーを最後まで移動すると、消える


**(はまった4) load をしてから play をする [#le4a3d1d]
load をしてから play をしないと、再生されないので、ちゃんとする。&br;

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


***iOS4.0 のとき [#o0125e56]
load をしないで play をしてしまったときに、iOS4.0 だと、"Loading" となる。

#ref("iPhoneSafariAudio1.png",left,wrap,50%)
&br;

***iOS4.1 のとき [#tcb42036]
#ref("iPhoneSafariAudio2.png",left,wrap,50%)
&br;

***サンプル [#y86183d7]
-[[audio ファイルを再生するサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#AudioSample1]]
-[[load しないで play するサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#AudioSample2]]
-[[load して play するサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#AudioSample3]]
-[[load しないで 他のファイルを play するサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#AudioSample4]]
-[[load して 他のファイルを play するサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#AudioSample5]]

&br;
*mailto [#m2958ba0]
**(はまった5) iPhone OS 3 [#g9cf7085]
mailto を使ってメール画面を開いたあと、setInterval が再開されない。&br;
iOS4 以降と iPad では、ちゃんと再開される。

***サンプル [#ie1d4941]
-[[mailto 後に setInterval が再開されないサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#Mailto]]


&br;
*iframe のスクロールバー [#ldfa1a3a]
**(はまった6) iframe のスクロールバー [#we0e2f58]
スクロールが表示されずに、中身が全て表示される。&br;
ので、スクロールバー使わずに、touch イベント取得して実装するほうがよいのかな。

Safari で見るとこんな感じ。
&br;
#ref("iPhoneSafariIframePC.png",left,wrap,50%)
&br;

iPhone (iOS4.1) で見るとこんな感じ。
&br;
#ref("iPhoneSafariIframe.PNG",left,wrap,50%)
&br;


ただ、iPhone シュミレーター(iOS4.1)だとこんな感じで、全部中身は表示されていないがスクロールバーはない。
&br;
#ref("iPhoneSafariAudio4.png",left,wrap,50%)
&br;

***サンプル [#y456639d]
-[[iframe のサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#Iframe]]


&br;
*iframe 内でのイベント [#rcabe49f]
**(はまった7) iOS4.1 の iframe 内のイベント [#hcf49a75]
iOS4.0 までは、iframe 内に touch イベントを設定しても、&br;
ちゃんと、touchstart → touchmove → touchend と順番にイベントを取得することができていた。
iOS4.1 では、touchstart → touchmove → touchend の順番にイベントがとんでこない...。

 親 … 親の html
 子 … iframe 中の html

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

&color(red){iOS4.2 にアップデートしたらイベントが取得できるようになりました};

***実験サンプル1 [#see18a75]
子の touchend が取得できない。

&br;
#ref("iPhoneSafariIframe1.png",left,wrap,50%)
&br;


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

&br;
#ref("iPhoneSafariIframe2.png",left,wrap,50%)
&br;



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

iOS4.0
#ref("iPhoneSafariIframe4.0-3.png",left,wrap,50%)
&br;

iOS4.1
#ref("iPhoneSafariIframe4.1-3.png",left,wrap,50%)
&br;



***最終的にこうなった [#ubce128a]
以下の実験サンプル3 を改良し、子でもイベントが取得できるようにした。

&br;
#ref("iPhoneSafariIframe4.png",left,wrap,50%)
&br;

イベントこんなん?
#ref("iPhoneSafariiFrameEvent.JPG",left,wrap,20%)
&br;



***サンプル [#kcf2514d]

-[[iframe イベントのサンプル:http://wiki.minaco.net/data/javascript/mobile/index.html#EventTestIframe]]
-[[iframe イベントの実験サンプル1:http://wiki.minaco.net/data/javascript/mobile/index.html#EventTestIframe1]]
-[[iframe イベントの実験サンプル2:http://wiki.minaco.net/data/javascript/mobile/index.html#EventTestIframe2]]
-[[iframe イベントの実験サンプル3:http://wiki.minaco.net/data/javascript/mobile/index.html#EventTestIframe3]]
-[[iframe イベントの最終的にこうなった:http://wiki.minaco.net/data/javascript/mobile/index.html#EventTestIframe4]]



&br;
*document.body.scrollTop [#n749ed36]
ちょっと確信がもてませんが。
-iOS4.2 以前 … うまく取得できてない気がする。。0 が返ってくるような。。
-iOS4.2 以降 … ちゃんと取得できるようになった?



&br;
*Comment [#v5b155e1]
#comment_nospam
&br;
#counter

IP:121.3.145.198 TIME:"2011-01-19 (水) 22:04:18" REFERER:"http://wiki.minaco.net/index.php" USER_AGENT:"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_5; ja-jp) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4"

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS