最近、携帯サイトに力点を移しつつあります。今後、モバイルインターネットの成長が急速に加速することはほぼ間違いないようですので。
ただ、個人的には、いわゆる携帯サイトというのは、あまり重要ではないと考えていて、iPhoneやブラックベリーのようなスマートフォンに対応できるようなサイトをメインに考えています。
今は、まだスマートフォンのシェアはかなり低いですが、いずれはスマートフォンがメインになって、現在一般的に言われている携帯サイトというのは、廃れてくるんじゃないかと思います。
スマートフォンの中でも、iPhoneしか使ったことがないですけど、一度使うとやめられません。携帯電話のハードの進化はこれから急速に進むでしょうし、iPhoneに限らず、形はどうであれ将来的には、パソコンに極めて近い形のものになるのでしゃないでしょうか。
とすると、パソコンからとスマートフォンからのアクセスに対応することができるサイトを作ることが重要で、世間でやたらと騒がれている携帯電話に特化した携帯サイトというものを考える必要性は低くなると思います。
とはいえ、まだまだスマートフォンのシェアは低いので、携帯電話に合わせたサイズをメインに作って、iPhoneからのアクセスに対してだけ別の対応をすることが必要です。
携帯電話用に作ったサイトをiPhoneで見ると、サイズが自動的に縮小されて、拡大しないとほとんど見ることができない状態になってしまいます。
詳しいことはわかりませんけど、原因は、iPhoneに搭載されているSafariが自動で縮小するかららしいです。
そこで、iPhone用のSafari専用のmeta要素であるviewport属性を使うことで、iPhoneからのアクセスに対してだけ画面に合ったサイズで表示させることができます。
例えば、以下の画面が、viewport属性設定前。
これにviewport属性を設定すると。
もう一枚、viewport属性設定前。
そして、viewport属性を設定後。
うまくmetaタグやjavaScriptを記述することで、携帯電話やスマートフォンに対応できるようです。
今後、５年くらいでモバイルが急速に成長することが明らかですから、サイトの設計段階から考えないといけないことがどんどん増えますよね。
ちなみに、さっきの画面で記述したソースは以下のとおりです。
<meta name="viewport" id="iphone-viewport" content="width=480, maximum-scale-0.6667, user-scable=no" />
↓↓↓iPhoneはこちら↓↓↓
