携帯サイトのスマートフォン対応のポイント！　～スマートフォン表示で最適サイズを設定する「viewport」～

1.携帯向けサイトは横幅240px、スマートフォンサイトは320px
2.スマートフォンにあるといい viewport
3.携帯サイトをスマートフォン対応させる

■携帯向けサイトは横幅240px、スマートフォンサイトは320px

携帯電話（ガラケー、フィーチャーフォン）の横幅はほとんどのものが240px前後であり、一般的に携帯向けのサイトは横幅240pxで作られます。

一方、スマートフォンでは、タブレットなどもありますが、片手で持てるタイプのものは320pxのものが主流となっています。

携帯サイトをスマートフォンサイトとして利用するにはこの横幅の問題があり、『画像が小さくなる／レイアウトが崩れる』などの問題が発生します。

■スマートフォンにあるといい viewport

スマートフォンでウェブサイトを閲覧すると、特にPC向けに作られたページの場合は、小さい画面に収まるようにして小さく表示されてしまいます。また、ブラウザ表示のための横幅の初期値は（機種などによってさまざまですが）画面サイズよりも大きくなります。※例えば iPhone では980pxとなる。

なので、せっかくスマートフォン向けに320pxで作ったサイトも、何もしないままだと980pxで表示されてしまいとても小さくなります。これを解決するのが『viewport』なのです。

「viewport」で検索するとたくさんの情報が得られます。ここでは簡単に説明します。viewportはいわゆるmetaタグです。ページを表示する際の画面表示に関する定義をします。これはスマートフォンだけでなく最近のブラウザのいくつかでも利用が可能なようです。

具体的にviewportで何ができるのかですが、横幅指定、縦幅指定、初期の表示倍率、拡大可能な最大倍率、縮小可能な最小倍率、拡大縮小を許可するかどうか、の設定が可能です。

<meta content="width=横幅, height=,縦幅 initial-scale=初期倍率, minimum-scale=最小倍率,maximum-scale最大倍率, user-scalable=拡大可否">

■携帯サイトをスマートフォン対応させる

携帯向けサイトをスマートフォンで利用するには、最初に述べた横幅の違い（携帯は240px、スマートフォンは320px）をviewportで解決することで可能となります。

実際にviewportを設定する前に、スマートフォンらしいレイアウトについて触れておきます。携帯電話の画面サイズは、最近では3インチを越えるものも出てきていますが、一般的にはとても小さな画面です。スマートフォンの場合は小さいとはいえ3インチを超えるものがほとんどです。

携帯電話は小さな画面のためコンテンツを詰めて表示します。しかし、小さいなりにもそこそこ大きいスマートフォンでコンテンツを詰めて表示してしまうととても窮屈な印象となります。スマートフォン向けに最適化されたサイトをご覧になった際に左右に余白があるのを見かけたことはないでしょうか。つまり、左右に余白を設けることで窮屈でない印象を与えるのです。

これらを踏まえると、画面サイズの微妙な違いをviewportで調整するには、『適度な余白を持って設定する』ということになります。また、うまく左右に余白を設けるためにCSSでも調整します。

■詳細は以下URLでご確認ください
http://www.aiship.jp/knowhow/archives/289

※240px×1.25＝300pxということでサイトの幅は300pxになり、画面サイズが320pxなので左右に10pxずつの調度良い余白ができます。スマートフォンショッピングカートのaiship

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/289
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝