Q&A
URLを掲載していますが、認証がかかっています。
現在、企業のリクルートサイトをレスポンシブ対応で作成中です。
http://p56.proto.develop.lionheart.co.jp/job/newgraduate/
スマホを縦にして見た時はいいのですが、横向きにすると画面が拡大して表示されてしまいます。
レスポンシブのブレイクポイントは768pxに指定しているので、横向きサイズでも対応できてるはずなのですが、
css
1コード 2@media screen and (max-width: 768px)
他に何か足りないものがあるのでしょうか？
よろしくお願いします。
追記
現在の縦の表示はこんな感じです。
横向きにした時にPC表示になるのは、問題ではなく拡大表示になってしまうのが問題でそれを修正したいです。
横向きも縦と同じにするのなら、ブレイクポイントを変えればいいだけなのかも教えていただけると助かります。
回答3件
0
window.screen.widthなどでサイズの確認ができます。
横向きした際に、window幅が768pxに収まっているでしょうか。
投稿2018/02/20 03:35
退会済みユーザー
総合スコア0
0
Bootstrap を使っているでしょうか？
あとこれブラウザ何でしょうか。
IE とかだと meta タグでの viewport 指定が効かなくて、css で指定する必要があるみたいですけど。
Bootstrap を覗いたら以下のような記述があった（ので、Bootstrapを使っているなら問題はそこではなさそうですが）
css
1@-ms-viewport { 2 width: device-width; 3} 4 5@media screen and (max-width: 400px) { 6 @-ms-viewport { 7 width: 320px; 8 } 9}
投稿2018/02/20 03:23
総合スコア1126
0
ベストアンサー
どのようなソースになっているか分からないので想像でしかないのですが、viewport入れてないとか
投稿2018/02/20 02:37
総合スコア80850
早速の回答ありがとうございます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
は入ってるんです。
なるほど。拡大というよりほぼPC仕様になっているように見受けられます。
縦のキャプチャと横はどうなったら正解なのかも追記願えますか？
横もスマホで見えるのが正解です。
うまく伝わっていないようで。。。
今も見えるのは見えているわけですし＾＾；
「横にしたときにどう見えるのが正解か（イメージ図など）」
「縦にしたときのキャプチャ」
の2点を質問本文に追記お願いします。
今、追記しました。
うまく伝えられているか不安ですが。
追記・追加ありがとうございます。
他のCSSフレームワークを見るとmin-widthとのあわせ技が見られます。
そちらは試してみましたか？
あっいえまだ試しておりません。
と言うか初耳でした。何か参考になるサイトなどはありますでしょうか？
私がよく使ってるやつです。
http://materializecss.com/
丁寧に対応していただきありがとうございました！
試してみます！
@media only screen and (min-width: 600px) and (max-width: 992px)
というか既に他の回答にあるように、
「横向きした際に、window幅が768pxに収まっているのか」というところがネックのように思います。
現に横向きにしたときに普通にPCと同じような表示なわけですし。
あ、これで解決か分からないので、ご注意を・・。（なので回答に追記ではなくコメントにしたんですが・・・）
あなたの回答
tips
プレビュー
