質問: レスポンシブに対応したサイトを作っており、 CSSのメディアクエリとjavascriptで画面幅に応じてデザインを変えています。 そのサイトで、1ページの一部だけを「PCで画面幅を縮めた時」と「タブレット・スマホで見た時」とでデザインを変えたいという要望が来ました。 ・PCで画面幅を縮めた時: 画面幅992px以上の時/画面幅に応じてコンテンツのサイズが変わるようにする 画面幅991px以下の時/992pxでぴったり収まるようなレイアウト・サイズで固定し、 991px以下の時でもレイアウト・サイズを変えず、 はみ出た分は横スクロールバーを表示する ・タブレット・スマホで見た時:コンテンツが画面内に収まるようにコンテンツのサイズやレイアウトを変え、 横スクロールバーはでないようにする ・ただし、そのコンテンツ以外のナビゲーションバーやフッターは、 他のページと同じように画面幅に応じてデザインが変わるようにしたい。(他のページと変えたくない) ・また、「一部のPCで見た時にタブレット・スマホのデザインで見えてしまう」のは許容しますが、 「一部のタブレット・スマホで見た時にPCのデザインで見えてしまう」は避けたいです。 (タブレット・スマホのデザインの方を重視したい) こういった場合、どう対処するのが良いでしょうか? 「PCの場合、かつ画面幅991px以下の場合」を判定して、その時のみコンテンツのサイズを固定する処理をし、 その他の場合は画面幅に応じて処理する・・・というのがスマートかと思い、 ユーザーエージェントでPCを判定する・・・なども考えてみましたが、いまいちよく分からず・・・ よろしくお願いします。
回答: せっかくなのでライブラリを使わない方法も簡単なので書いておきます。 個人的によく使うのは ``` var isMobile = navigator.userAgent.match(/(iPhone|iPad|Android|...以下省略)/); document.addEventListener('DOMContentLoaded', function() { if(isMobile){ document.body.className = 'mobile'; } }); ``` といった**「ユーザーエージェントでの判定+body等へクラスを付与」**という方法です。 ``` .xx{ /* PCでのスタイル指定 */ } .mobile .xx{ /* モバイルでのスタイル指定 */ } ``` そして、こんな感じでcssを指定してやればPC時にはモバイル時のスタイルが適用されない為 「PCで画面幅を縮めた時」と「タブレット・スマホで見た時」とでデザインを変えることができます。 ユーザーエージェントの判定を使うのは ブラウザのユーザーエージェント切り替えでデバッグできる為(デバッグ時にいちいち実機を起動させるのが面倒なので...最終的に実機での検証もするので同じと言えば同じですが。。) また、この場合`match()`に渡した文字列で判定を調整できるので、対応させたいデバイスのユーザエージェントさえ分かれば細かく指定可能です。 * Windows Phoneやkindleなどの判別も簡単です。 * Androidは「Mobile」の文字列があるかどうかでタブレットとスマホを判定可 * `console.log( navigation.userAgent );`で実際どんな文字列が表示されるかを一度ご覧になってみると、matchに渡すべき文字列の組み合わせも判断しやすいでしょう。 console.logを試すと、一応`navigation.userAgent`でもOS判定もできることが分かるかと思います。 参考として **UserAgentからOS/ブラウザなどの調べかたのまとめ** OSで判定したい場合`navigator.platform`等を使う方法もあります。 OSで判定するかユーザーエージェントで判定するかはどちらでも「お好みで」というくらいで良いかなと思います。 ご参考までに。