iPhoneでiframeがはみ出してしまう

twitterのウィジェットを使っているサイトをiPhoneで見ると、twitterのiframeが画面の外まで伸びてしまっていた。

cssではmax-width: 100%;と指定している。
Androidでは問題なく表示されていたが、iPhoneではどうもうまく動かないらしい。

いろいろcssを変更してみた感じだと、width,max-widthの値を％で指定するとうまく効いてくれないみたい。
px指定だとちゃんと変更された。

親要素の問題かもしれない。
ちょっと調べてみよう。

retina用画像のサイズ指定はwidth="50%"でいけそうだ。…と思ったら状況によるな

スマートフォンサイトを作ってるんだけど、もうretina用画像のみで作ってって話になった。

いちいち一個ずつ画像サイズを調べて、その半分のサイズを指定ってやるのが面倒だったので、
 <img src="file.png" width="50%">
って書いたら、うまく表示された。

 height="50%"もいれとくか。

 --add 2013.05.21 height="50%"を入れたら、表示がおかしくなった
さらにwidth="50%"でもおかしくなる画像もあった。

要は…状況による。
imgタグを囲ってる要素にサイズ指定があったりすると、その要素のサイズの50％ってなってしまうのかも。
 半分のサイズを指定するのが安全そうだ

[iPhone] webページの高さが画面より小さい場合に画面にページサイズを合わせる

ページの高さが画面より小さい場合、ページの表示を画面いっぱいになるように拡大してくれんのはありがたいんだけど、拡大した分、今度は横が広がって画面からはみ出る。
そんな場合にJavaScriptでページの高さを調整する。

//jQuery使ってます。
//画面比率
var ratio = window.innerHeight / window.innerWidth;
//横幅に合わせた高さの設定
var winH = $('body').width() * ratio;
$('body').css('min-height', winH);

俺はiPhone5を使ってるので、以前のiPhoneがどうだったか確認しとりません。

スマートフォンで背景を全画面に適応する

最近は背景を全画面に敷いたサイトが増えた気がする。
スマートフォン版のサイトでも、同じように背景画像を全画面に設定シたい場合がある。
そんな時はcssでbackground-sizeを指定する。
background-size: ***

指定は縦横、それぞれpxや%で指定できる以外に、containt, coverという値もある。
containは範囲内に縦横収まるように、拡大縮小する。
coverは範囲を全部覆う様に拡大縮小する

もちろん、スマートフォン以外にも使えるけど、対応するブラウザがまだ限定されてるので、今のとこスマートフォン向けにしか使えないかなという感じ

参考：背景画像のサイズを指定する

[iOS] iPad, iPhoneのaudioタグは同時に複数鳴らせない

iPad向けにsafariでできるゲームのようなものを作った。
その際、audio関連で色々引っかかった。
起きた問題はすべてPC版のsafariでは起きない問題だったので注意。
アニメーションなんかの動き系はPC版とあまり変わらないけど、audioは別。

・同時に複数鳴らせない
・クリックイベントと音がずれる

同時に鳴らせないのは仕様で、音がずれるのは複数の音声ファイルを扱うのは下手だからみたい。
全部のファイルをくっつけて、指定の音までシークして再生させると良いらしい。

参考：
【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点
iPhoneでHTML5のaudio要素を使うときに気をつけたいこと

iPhone, iPad の safariでアニメーションがちらつく

前に「CSSアニメーションがちらつく場合」で書いたけど、iPhoneのcssアニメーションでtranslate3dを使うとちらつかなくなるってのがあった。
今回は別の理由。

■問題
幅2000pxくらいのデカい画像を左から右まで素早く移動させたり、「ページトップへ」なんてボタンをクリックして、ページの最上部まで素早く移動させたりする時にちらつきがおきる。

これは、iPhoneの場合スクリーンを中心とした「1024px × 1024px」*は画面の外だったとしても描画されていて、その範囲外の部分は再描画しないといけないからみたい。
そして、この再描画には少し時間がかかる。

なので、再描画される前にその範囲外だった部分まで移動すると、画像やその要素がまだ表示されていない状態で画面内に入ってきてしまう。

■対処法
・iPhone自体のデフォルトのスクロールスピードの範囲内だったら、再描画される前に画面内まで来てしまうことはないようなので、スクロールのスピードを調整する。
・再描画される前に画面内まで来ないように、スクロールのスピードを調整する。
・でかい画像や要素をスクロールしているのなら、それを1024px以内になるように分割して順番にスクロールさせる。
とかかな

*iPadの描画範囲はいくつだろう？iPhoneの比率から考えると画面の縦横2倍ずつくらいかな。

参考：
Fast animation with iOS WebKit（英語）

[JavaScript] CSSアニメーションの開始・終了イベント

最近iPad向けにcssアニメーションを頻繁に使う仕事をやった。
-webkit-transitionじゃなくて-webkit-keyframesで動かすタイプ。
アニメーションを開始するタイミング、終了するタイミング、ループするタイミングでイベントを登録できることを知ったのでメモ。便利。

//アニメーション開始時
//delayを指定していた場合は、遅れて開始するタイミングで発生するらしい
elem.addEventListener('webkitAnimationStart', function(){
 //開始時の処理
});
//jQueryなら
$(elem).bind('webkitAnimationStart', function(){
 //開始時の処理
});


//終了時
elem.addEventListener('webkitAnimationEnd', function(){
 //終了時の処理
});

//ループ時。animation-iteration-countが1より大きい時に発生する
elem.addEventListener('webkitAnimationIteration', function(){
 //ループ時の処理
});

今回はiPad向けだったので、webkitのみを対象にしたけど、FireFoxだとanimationstart, animationendとプレフィックスなしの全部小文字になるらしいので注意。

参考
CSS アニメーションの基礎

[iPhone] JavaScriptの処理にかかった時間を取得する

iPhoneのSafariだとデバッグコンソールを出して、console.logでデータを出すこともある程度できる。
だけど、JavaScriptの処理時間を計測するためにconsole.time(), console.timeEnd()を使ってみても表示されない。
なので、自分で計測する関数を作った。

var times = {};
function consoleTime(name){
 //指定がなかったらstart

 var d = new Date();

 if(typeof times[name] === 'undefined'){
  //スタート時のタイムスタンプを保存
  times[name] = d.getTime();
  return;
 }else{
  console.log(d.getTime() - times[name] + 'ms');
 }
}

consoleTime('timeCheck');
//何か処理して
consoleTime('timeCheck');
//***ms

Androidでは試してないけど、console.logのとこをalertに変えれば表示されるんじゃなかろうか。

[JavaScript] jQueryをローカルストレージに保存して高速化

サイトに来る度にjQueryを読み込み直すんじゃなくて、ローカルストレージに登録したほうが早いんじゃないかって思ったのでやってみた。

■Chromeの場合
読み込む場合にかかった時間 125ms～200ms
ローカルストレージから読み込む場合 25ms～40ms

■iPhoneの場合
読み込み
Wi-Fi 280ms～400ms
電話回線 800ms～1200ms
ローカルストレージ
130ms～200ms

通信環境によって、色々変わりそうだけど、iPhoneだと大きく違う！
早いぜっ！

アプリケーションキャッシュにすればもしかして全部解決なのかも…

--add [2012/8/24]
スマートフォン向けのサイトなら、jQueryをよみこむのはXMLHttpRequestじゃなくて、scriptタグを生成する方がよさそう。その場合はscript要素のonLoadイベントで読み込み後の処理を開始するといいはず。(試してない)
参考：[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

//jQueryを読み込んだ後に最初に呼ぶ関数
function start(){
 //jQuery読み込み後の処理
}

//ローカルストレージからjQueryを読み込む
var jQ = window.localStorage.getItem('jQuery');

if(jQ === null){
 //ローカルストレージにない場合
 //jQueryファイルを読み込む
 loadJQuery();
}else{
 //ローカルストレージにある場合

 try{
  //ローカルストレージに保存してある文字列をJavaScriptとして処理
  eval(jQ);

  if(typeof jQuery === 'undefined'){
   //ローカルストレージのjQueryがうまく動かなかった場合は読み込み直し
   throw new Exception();
  }
  
  start();
 }catch (e){
  //evalでエラーが出た場合は読み込み直し
  loadJQuery();
 }
}

//jQueryを読み込んでstart関数を呼ぶ
function loadJQuery(){
 var xmlhttp = new XMLHttpRequest();

 xmlhttp.open("GET", 'jQueryファイルへのパス', true);
 xmlhttp.onreadystatechange = function(){
  
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
   
   //読み込み成功時
   var str =  xmlhttp.responseText;
   
   //文字列として読み込んでローカルストレージに保存
   window.localStorage.setItem('jQuery', str);
   //JavaScriptとして処理
   eval(str);
   start();
   
  }else if(xmlhttp.readyState === 4 && xmlhttp.status !== 200){
   //読み込み失敗時
  }
 };
 
 xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 xmlhttp.send();
}

[iPhone] 縦向きでも横向きでも画像を画面いっぱいに表示したい

画像を画面いっぱいに表示する方法
cssで指定する

img {
  width: 100%;
  height: auto;
}

[iPhone] iPhoneでのスクロール判定。 iPhone3, ios 4.1だとdocument.body.scrollTop/scrollLeftが取得できない

facebookのページみたいに、ページ下部までスクロールしたら自動で次のデータを表示する処理を以前に作った
iPhone4.1だと自動で読み込まないことが判明。

定期的にdocument.body.scrollTopでスクロール位置を取得して、ページの下の方までスクロールしたら次を読み込むという風にしていたんだけど、iPhone4.1だとdocument.body.scrollTopが使えなかった

対処：
window.pageXOffset/pageYOffsetを使うと取得できる
Androidでも大丈夫(Android2.2, 2.3, 4.0で確認済み)

iScrollを使うとselectタグが動かなくなる

iScrollっていうスマートフォンでposition:fixedを再現できるライブラリがあるんだけど、それを使うと中にあるselectタグが反応しなくなった。

調べてみたら解決済みみたい。
参考：スマートフォンでposition:fixedを再現するiscroll！input問題も解消

この書き方だと画面全体でデフォルトのスクロールができなくなるのかな？
俺の場合はiScrollを使うのはページ内の一部なので、これだと困る。
使うのもとりあえずselectタグだけだった。

なのでスクロール停止機能とイベント伝達停止機能は限定的にした

var myScroll = new iScroll("id名", {
 var target = e.target;
       while(target.nodeType !== 1){
  target = target.parentNode;
 }

 if(target && target.tagName == "SELECT"){
  e.stopPropagation();
 }
});

var iScrollElem = document.getElementById("id名");
iScrollElem.addEventListener("touchmove", function(e){e.preventDefault();});

[iPhone] プライベートブラウズモードだとストレージが使えない

ユーザーの行動を色々保存しておいて、そのユーザーにあったコンテンツを表示する機能ってのを以前作った。
その機能を作るのにWEBストレージを使ってるんだけど、iPhone Safariのプライベートブラウズ機能をオンにすると、ストレージがうまく使えない。

//取得できない
global.localStorage.getItem("name"); //nullが返ってくる

//登録もできない
global.localStorage.setItem("name", 'Taro');  //例外になる

とりあえずはsafariだけみたい。
プライベートモードかどうかを判定することもできるみたいだけど、将来的にどうなるかわからんのと、絶対に必要な機能というわけではなかったので、プライベートモードの時は上記の機能は使えないようにした。

具体的にはtryで囲っただけ

try{
 global.localStorage.setItem("name", 'Taro');  //例外になる
}catch(e){
 //何もしない
}

参考：[ネット技術]HTML5のストレージ技術とプライベートブラウジング 

[JavaScript] iPhone で alert, confirmを使うと動きが変になった

ボタンを押すと「***していいですか？」という確認ダイアログが出てきて、「OK」を押すと処理を続けて、「キャンセル」を押したら中断ってな処理を作った。
ダイアログはtouchendイベントで出てくるようにした。
どっちを押したとしても、それぞれの処理をして終わり…になる予定だったが、ダイアログが閉じた後、ボタンをタッチすると(touchstart)指を離さなくても、もう一度同じダイアログが表示されるようになった

alertでも同じようなことが一度あった。iPhoneだとalertやconfirmでダイアログが出ると、イベントが途中で止まって、もう一度触ると止まったとこから再度動き出す…ようなイメージ。

対処法：：クリックイベントの中身を全部setTimeoutで囲った。

elem.addEventListner("click", function(){
 setTimeout(function(){
  //クリック時の処理
 }, 0);
});

[iPhone] タッチイベントとクリックイベント

iPhoneではタッチイベント→クリックイベントの順に処理されるみたい。

スマートフォン向けサイトで「ページ上部に戻る」ボタンを置いた。
クリックイベントだとAndroidでもっさりな動作に感じるので、touchendイベントで反応するようにした。

touchendイベント
↓
ページ上部にスクロール
↓
clickイベント
↓
スクロールしてるから、クリックした場所にはすでに別のモノが…
↓
その別のモノをクリック！

って感じになった。

なので今回はクリックイベントのみ処理するように変更した。

タッチエンドイベントをクリックイベントがわりにするとこまごまと引っかかる。
まあ、対処できないようなことではないのでいいんだけど…。

iPhoneからのメールをデコードするとタイトルが文字化けする

メールで投稿できるブログシステムみたいなやつで文字化けすることがあるというので対応した。

文字化けするのはiPhoneからのメール
受信したメールを分解して処理しているのはPEARのMail_mimeDecode

調べてみるとiPhoneで送られるメールのタイトルと本文で文字コードが違うことが原因だった
Mail_mimeDecodeだとタイトルの文字コードは本文と同じものとして処理しているのかも。

結局Mail_mimeDecodeではなくZend_Mail_Partを使うことにした

参考：
iPhoneから送ったメールが文字化けする問題について

[JavaScript] スマートフォンでのselectのchangeイベントのタイミング

スマートフォンのフォームのselectタグのUIって選びやすくていい。
iPhoneだと画面下から選択項目がでてくるやつね。

で、それを変更した時のonchangeイベントのタイミング

iPhoneの場合
項目を選択して、決定を押した時


Android 2.3の場合
項目を選択した時 (決定？完了？ボタンを押す前)

なのでAndroidの場合、画面下部に選択項目が出てる状態でonchangeイベントが起きる。

「決定」を押した時のイベントはなんになるんだ？

iPhone, AndroidでURLバーを隠す

スマートフォンは画面が小さいのでURLバーを非表示にしたい時がある。
そんな時は

scrollTo(0, 1);

これでurlバーが隠れる。
縦のスクロールが0だとAndroidが反応しない

ページの高さが画面の高さより小さい場合はURLバーは出たまま。
スクロールできないからね。



-- add:
※ページ読み込み時に上の処理を無条件で動かすと、この処理が動く前にスクロールしてたのが、一番上まで戻されることになってしまうので注意。
スクロールされていない時だけに限定したほうがよさそう

if(docment.body.scrollTop === 0){
 scrollTo(0, 1);
}

参考：
iPhone／Androidブラウザのアドレスバーを隠す方法

[JavaScript] スマートフォンかPCか判別する

正確には、タッチパネルかどうかを判定する機能。
これからノートパソコンにもタッチパネルとか出てくるかもしれないから、確実じゃないかも。

var clickType;
var hasTouch;

if("ontouchend" in window){
  hasTouch = true;
  clickType = "touchend";
}else{
  hasTouch = false;
  clickType = click;
}

こうやってタッチパネルかどうか判断しといて、クリック(またはタッチ)イベントには

element.addEventListener(clickType, function(){
  //ここに処理
});

touchendイベントの設定だけだと、タッチした後、ドラッグアウト(でいいのかな？)した時でもイベントが起きるようになるので注意。
必要ならtouchmoveが起きた時はイベントが起きないようにしないとだめ

詳しくは「iPhone、アンドロイドでのクリックイベント」

[JavaScript] スマートフォンでウィンドウの高さを取得する

スマートフォンでウィンドウの高さを取得するのは簡単…なはず。

window.innerHeight;

これで一応取得できる。

困るのはURLバーが表示されている時とされていない時で数値が変わってくること

URLバーが出てる場合は

実際のウィンドウの高さ - URLバー
が返ってくる。

要はコンテンツを表示する部分のサイズってことなんだけど、動的にサイズを決めたりする場合はメンドくさいこともある。

scrollTo(0, 0);//スクロールさせてURLバーを隠す
var windowH = window.innerHeight;

こんな感じにすればURLバーがない場合で統一できる


参考：
スマートフォンサイトのディープな作り方