レスポンシブサイトをスマホの横向きで見た時の見え方について

Question

ご覧いただきありがとうございます。

レスポンシブサイト構築に関する質問です。

レスポンシブ対応をしてスマホ（縦向き）で見た時には
スマホ用のレイアウトで見えて、
スマホを横向きにするとPC用のレイアウトでデバイス幅ぴったり（スマホ対応してないサイトを見た時のような全体を縮めた感じ）で見えるようにしたいのですが、
横向きにするとPC用のレイアウトが全部表示されず、はみ出した状態(横に移動できるような状態)になってしまします。

どうしたらスマホを横向きにした時の見え方をPC用の横幅ぴったりの表示にすることができるかお教えいただきたいです。

よろしくお願いします。

Answer 1

はじめまして。
CSSのmediaqueryを追加してみてはどうでしょうか.
記述例としましては,

@media (min-width: 600px) and (max-width: 800px) {
//ウィンドウの横幅サイズが600px～800pxの場合に適応するCSSを記述.
//既存のものに上書きされます.
//Ex.
#maincontent{
float: right;
width: 300px;
}
}

上記の記法をCSSに埋め込むか、もしくは下記の記法にて外部CSSを読み込むことも可能です.
下記の書き方では、ウィンドウ横幅サイズが0 ~ 500pxの場合に外部CSS"width-500.css"を読み込むという命令です.

<link rel="stylesheet" media="(max-width: 500px)" href="with-500.css">

こういったmediaqueryを追記して,スマフォ・タブレットの横幅サイズ範囲を指定してあげれば,横画面の場合のみのレイアウトを構築することができます.

Comments

[Pyth]

追記を失礼いたします。
下記サイトにCSSmediaqueryについての詳しい説明・用例などがございますので、CSSmediaqueryをご使用の際は参照してみてください。

Google Developers　”CSS メディア クエリを使用してレスポンシブにする”
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=ja

[hiro-]

Pythさん
はじめまして。
ご回答いただきありがとうございました。
状況のわかる情報が少ない中、回答いただきまして本当にありがとうございました。

質問していた内容ですが、自己解決することができました。
PC用のcssにmin-widthを指定することで実現したかった表示ができました。
多分、レスポンシブの設計がそもそも間違っているのかもしれません。

Pythさんの新しくメディアクエリを追記する方法や教えてくださいました参考サイトが
自分と同じことでハマってしまった人の役に立つと思いましたので、
ベストアンサーに選ばせていただきたいと思います。

この度はありがとうございました。