レスポンシブに対応したサイトで、PCで画面幅を縮めた時とタブレット・スマホで見た時のデザインを変えたい場合

レスポンシブに対応したサイトを作っており、
CSSのメディアクエリとjavascriptで画面幅に応じてデザインを変えています。

そのサイトで、１ページの一部だけを「PCで画面幅を縮めた時」と「タブレット・スマホで見た時」とでデザインを変えたいという要望が来ました。

・PCで画面幅を縮めた時：
画面幅992px以上の時／画面幅に応じてコンテンツのサイズが変わるようにする
画面幅991px以下の時／992pxでぴったり収まるようなレイアウト・サイズで固定し、
991px以下の時でもレイアウト・サイズを変えず、
はみ出た分は横スクロールバーを表示する
・タブレット・スマホで見た時：コンテンツが画面内に収まるようにコンテンツのサイズやレイアウトを変え、
横スクロールバーはでないようにする
・ただし、そのコンテンツ以外のナビゲーションバーやフッターは、
他のページと同じように画面幅に応じてデザインが変わるようにしたい。（他のページと変えたくない）
・また、「一部のＰＣで見た時にタブレット・スマホのデザインで見えてしまう」のは許容しますが、
「一部のタブレット・スマホで見た時にＰＣのデザインで見えてしまう」は避けたいです。
（タブレット・スマホのデザインの方を重視したい）

こういった場合、どう対処するのが良いでしょうか？
「ＰＣの場合、かつ画面幅991px以下の場合」を判定して、その時のみコンテンツのサイズを固定する処理をし、
その他の場合は画面幅に応じて処理する・・・というのがスマートかと思い、
ユーザーエージェントでＰＣを判定する・・・なども考えてみましたが、いまいちよく分からず・・・
よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

せっかくなのでライブラリを使わない方法も簡単なので書いておきます。

個人的によく使うのは

JavaScript
1var isMobile = navigator.userAgent.match(/(iPhone|iPad|Android|…以下省略)/);
2
3document.addEventListener('DOMContentLoaded', function() {
4  if(isMobile){
5    document.body.className = 'mobile';
6  }
7});

といった**「ユーザーエージェントでの判定＋body等へクラスを付与」**という方法です。

css
1.xx{
2  /* PCでのスタイル指定 */
3}
4.mobile .xx{
5  /* モバイルでのスタイル指定 */
6}

そして、こんな感じでcssを指定してやればPC時にはモバイル時のスタイルが適用されない為
「PCで画面幅を縮めた時」と「タブレット・スマホで見た時」とでデザインを変えることができます。

ユーザーエージェントの判定を使うのは
ブラウザのユーザーエージェント切り替えでデバッグできる為（デバッグ時にいちいち実機を起動させるのが面倒なので…最終的に実機での検証もするので同じと言えば同じですが。。）

また、この場合match()に渡した文字列で判定を調整できるので、対応させたいデバイスのユーザエージェントさえ分かれば細かく指定可能です。

Windows Phoneやkindleなどの判別も簡単です。
Androidは「Mobile」の文字列があるかどうかでタブレットとスマホを判定可
console.log( navigation.userAgent );で実際どんな文字列が表示されるかを一度ご覧になってみると、matchに渡すべき文字列の組み合わせも判断しやすいでしょう。

console.logを試すと、一応navigation.userAgentでもOS判定もできることが分かるかと思います。
参考として
UserAgentからOS/ブラウザなどの調べかたのまとめ
http://qiita.com/nightyknite/items/b2590a69f2e0135756dc

OSで判定したい場合navigator.platform等を使う方法もあります。

OSで判定するかユーザーエージェントで判定するかはどちらでも「お好みで」というくらいで良いかなと思います。
ご参考までに。

投稿2016/05/19 10:05

編集2016/05/19 10:05