少しずつiPhoneでのサイト構築の機会が増えつつある中、
参考になりそうなエントリーがあったのでメモ書き&紹介します。

iPhoneWebCreatorBox.jpg
WebサイトをiPhoneで見やすくする5つの方法 | Webクリエイターボックス

先日ここでも紹介した『iPhone & iPad それぞれにCSSを切り替える方法』に加えて、
PHPやJavaScriptでのuserAgent切り替え方法、iPhoneサイト構築用のツールなどさまざま。
紹介されているツールの「Mobify」はまだ使ったことないですが試してみたい一つです。

後半には「iPhone用Webサイトギャラリー」と題した、
デザインの優れたサイトを紹介しているので
今後のiPhoneサイトデザイン設計の参考にもなりそうです。

iPhoneサイト制作の際に是非。。。

上記紹介サイトにはjQueryを使っての、iPhoneをUserAgent判別させる方法はなかったので
何か方法はないか試したところ、以前ここで紹介した、
OSを判別することができるjQueryプラグイン「jQuery Browser Plugin」』の
jquery.browser.jsを使用することでjQueryを使ってのiPhone判別が可能になりそうです。

記述方法の例としては

$(function() {
	if($.os.name == 'iphone') {
		$('p').text('ご使用の環境は「iPhone」です。');
	} else {
		$('p').text('ご使用の環境は「iPhone」ではありません。');
	}
});

これを実際に動作させると

iPhoneでこのページを見た場合には『ご使用の環境は「iPhone」です。』のメッセージが表示され、
iPhone以外では『ご使用の環境は「iPhone」ではありません。』が表示されます。
あくまで“iPhone”のみの判別になるので「iPad」や「iPod Touch」では“iPhone以外”の対象になります。

もちろんテキストを変更するだけでなく、処理内容を振り分けることによって
iPhoneとそれ以外の環境での別々の見せ方が可能になると思われます。

他にもiPhoneサイト構築の手助けツールはたくさん出てきているので
制作の際にも困ることはなくなりそうです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

iPhoneサイト構築で役立ちそうなもろもろ & jQueryでiPhone判別方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner