簡単！？iPhone対応サイトの構築方法
JavaScriptの注意点
とりあえず、ホームの「設定」「Safari」「デベロッパ」で「デバッグコンソール｣をオンにしておきましょう。JavaScriptのエラーのほか、HTMLやCSSのエラーも表示されるようになります。SafariのHTML解釈は厳密ですから、HTMLの記述ミスなども発見できます。
iPhone上のSafariでは、JavaScriptの制限はほとんどありません。バージョンも最新の3.1と同様ですから、過去のSafariにあった大きなバグも修正されています。
ただし、メモリ使用量が10Mまで、実行時間は5秒までとなっていますので、富豪的プログラミングというわけにはいきません。美しい継承階層構造と便利できれいなユーザーインターフェースを持った汎用のJavaScriptライブラリは無駄にリソースを食ってしまうかもしれません。
また、iPhoneの並列実行効率はあまりよくありませんので、JavaScriptによるアニメーションとXMLHttpRequestを並行しておこなったりすると、カクカクしたりスクロールができなくなったりするので注意しましょう。
続いて細かい注意点としては、デバッグコンソールを表示しておけば、console.log()、console.info()、console.warn()、console.error()などでメッセージを確認できます。
viewport指定のタグは読み込み時にのみ有効で、動的に変えることはできません。viewport指定はHTMLでおこないましょう。
window.innerWidth、window.innerHeightで表示されている範囲の仮想的な高さと幅がわかります。少しわかりにくいのですが、縦向きに使っている時にピンチインによって幅320px指定の内容を2倍の大きさにズームしている場合、window.innerWidthは160となります。PCのSafariと同様に、見えている範囲がinnerWidth／innerHeightであると思えば差し支えありません。
window.resizeTo()やwindow.close()は使えません。alert()、confirm()、prompt()は使えます。
タップによるclickイベントはフォーム要素やリンクなどのクリッカブル要素では発生しますが、PCのブラウザのように一般的な要素では発生しません。また、mousemove、mouseover、mouseout、mousedown、mouseupなどのイベントは当然発生しません。ただし、onclick属性やaddEventListner("click",function(){})でクリッカブルにすれば、イベントが発生します。
dblclickやkeydown、keyup、keypressも同様です。フォーム要素へのfocusイベントは発生します。
以上、少し細かい部分もありますが、大きさ指定のウィンドウを開けたり、マウスオーバーで自動的にポップアップしたりするスクリプトでなければ、たいていのものは動きます。
