はじめまして、今年入社したての岩間です。
雨にも負けず風にも負けず、風邪には全敗しつつ仕事に励んでいます！
入社して半年・・・私は1からJavaScriptの勉強を始めました。
今回から全3回に分けて、実際に仕事としてプログラムを書く上で困ったことと、私が行った解決方法を紹介していきます！

スマホ対応で困ったこと

その1　ページ全体が縮小されてしまう

文字サイズやスマホ用に作った画像が縮小され、構成する際、大幅に拡大しなければなりませんでした。
画面サイズとコンテンツサイズをそれぞれ確認してみると、幅320pxの画面に、幅980pxのコンテンツが表示されています・・・。

その980pxってどこからきたの！？

調べてみると、スマホ表示にはViewport（ビューポート）の設定が重要だったようです！
Viewportとは表示領域のことで、何も指定しないとデフォルト値の980pxになり、小さくなってしまったというわけです。
これで内容が縮小されてしまう原因がわかりました！

その2　タブレットの表示領域がPC表示に合わない

スマホ用にViewportを設定したはいいものの、iPadなどのタブレットでPC表示をするとき、一部のコンテンツが画面からはみ出して無駄な余白ができていました。

はみ出た分だけ横にスクロールできるようになってしまって、不恰好です・・・。

原因はコンテンツごとに幅の指定方法が違ったからのようです！
画面に合わせたいコンテンツ（ヘッダー等）は幅100％の指定をしているので、Viewportの範囲内で幅いっぱいになります。しかし、大きさを固定しているコンテンツは画面サイズで横幅が変わらないため、画面内に納まらずにViewportからはみ出て、余白ができてしまいました。

その3　環境によって画像一覧の見え方を変えたい

リストの高さがバラバラで、回り込んだリストがズレてしまっていたのを、AutoHeightを使って整えていました。AutoHeightは揃えたい要素の全体を一番高いものに合わせる方法と、指定した数ずつ揃える方法（2つなら2つのうち高いほうに揃う）があります。
今回は、PC表示では3つずつ、スマホ表示では2つずつ高さが揃うようにしました。

でも、大きい画面のスマホを横にしたとき、2つずつでは画像が大きくて見辛くなります。
逆に、画面の小さいスマホは縦でも横でも2つずつでないと画像や文字が小くて見辛くなってしまいます。

私は、2つはスマホ表示、3つはPC表示という固定概念に囚われてかなり悩みました。

nexus7はPC表示にしたいけど、nexus7の幅で切り替えると変えなくてもいい機器までPC表示になってしまう・・・。一体どうすれば・・・。

ここで上司から救いの一言
「難しく考えすぎ。大きいスマホは、スマホ表示でリストを3列にすればいい。」

なるほど・・・！！

これで全部の解決策が出てきました。
そして、悩んで悩んで沢山調べて沢山試したおかげでjQueryをどういう風に書けばいいかわかるようになっていました（感涙）。

さて、具体的な解決方法については、次回からjQueryの記述と併せて解説していきます！

第2回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第２回/全３回）
第3回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第３回/全３回）