iOS5のSafariでlabelとcheckboxが連動しない対策

iOS5のSafariでは、forで紐付けたlabelとcheckboxを連動できない。

<input id="test_check" type="checkbox">
<label for="test_check">チェックする</label>

この対策でよく見かける方法が、空のjavascriptのclickイベントを記述するやり方。

<input id="test_check" type="checkbox">
<label for="test_check" onClick="">チェックする</label>

一括指定もできる。labelとcheckboxのセットが大量にある場合はこっちのほうが便利。
ただし、labelをクリックしたときに動作させるjavascriptを組み込みたい場合は競合の心配があるので注意。

<input id="test_check" type="checkbox">
<label for="test_check">チェックする</label>
$("label").click(function(){});

スマートフォンのオーバーレイを開いた瞬間の誤タップ防止

スマートフォン、というかAndroid端末むけのオーバーレイ対策としては
オーバーレイの背面にかくれたリンクもタップできてしまうトラブルが有名ですが
他にも困ったことがあったのでメモ。

オーバーレイを表示させるボタンのタップ位置とオーバーレイ上のリンクが重なると
開いたと同時にリンクをタップしてしまい、誤動作を起こしてしまいます。

“スマートフォンのオーバーレイを開いた瞬間の誤タップ防止”の続きを読む

iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize

回転イベントorientationchange

画面が回転したときに何かさせたいときはorientationchangeで設定できます。
※Androidは2.2から対応しました。2.1の端末では動きません。

$(window).on(“orientationchange”,function(){
	alert("画面が回転しました"); // ここに実行したい処理を書く
});

回転したときだけ実行する場合は、これでいけますが
ページ読み込み直後にも処理を実行したい場合だったら、
resizeもセットで設定します。

$(window).on(“orientationchange resize”,function(){
	alert("この端末の横幅は"+window.innerWidth+"pxです");
});

サンプルページ

“iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize”の続きを読む

スマホサイトを作りながらiPhoneで確認する方法

iPhoneとスマホコンテンツを開発するパソコンが同じローカルネットワーク内にいる場合WiFi接続で
マークアップ中の画面を確認できます。

Macの場合は特にやることもなく、設定したlocalhost名をiPhoneのSafariで開けばOK
(Mac用のところはとりあえず下書き。またこんど掘り下げます)

Windowsは一手間かかった。

“スマホサイトを作りながらiPhoneで確認する方法”の続きを読む

スマートフォンで「お気に入り」リンク

レトロ感ただよう「お気に入りに登録」リンクのほうの話です。
押したらブラウザのブックマークへ登録される、あれです。
ソーシャルブックマークではありません。

スマホサイトに付けてほしいとお客様からご要望いただいたのでメモ。

“スマートフォンで「お気に入り」リンク”の続きを読む

Basic認証がかかっているとAndroid2.2以下でCSSが読み込めないことがある

Android2.1や2.2で、cssを読み込めない症状が頻発してアタマを抱えていた。

  • テスト確認用のサーバへアップすると発生するようになる。
    localhostで作りながら確認しているときは何ともない。
  • バージョンが古くなればなるほど症状が出やすい
  • 端末のbackボタンでページ遷移すると、ことさら頻繁に発生する。

“Basic認証がかかっているとAndroid2.2以下でCSSが読み込めないことがある”の続きを読む