少しずつiPhoneでのサイト構築の機会が増えつつある中、
参考になりそうなエントリーがあったのでメモ書き＆紹介します。
≫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サイト構築の手助けツールはたくさん出てきているので
制作の際にも困ることはなくなりそうです。
ご参考までに。。。