Q&A
質問文に書かれている問題については解決していますので、いったん「解決済」にされてはいかがでしょうか。また、新たに出た問題はHTML/CSSが提示されない限り的確な解答は出来ないと思います。
ランディングページを作っております。
改行タグを<br class="hidden-xs">として、
スマホの時だけ改行をとるというCSSを書いています。
@media only screen and (max-width: 480px) { .hidden-xs { display: none ;} }
がしかし、これでスマホの場合(480px以下)は改行がとれて表示されるはずなのですが、
改行がとれずそのまま表示されてしまいます。
【やったこと】
Googleのディベロッパーツールにてスマホの時の幅を確認したところ、
スマホの表示なのにも関わらずPCと同じピクセル幅の表示になっていました。
一方でスマホの時にちゃんと改行が取れるレターはディベロッパーツールで見たときの幅が
384pxとスマホの幅で表示されていました。
おそらく上記が原因かと思われるのですが、どのように記述すれば解決できるのか悩んでおります。
もしご存知な方がいらっしゃればご教示いただけますとありがたいです。
回答3件
0
おそらく、ビューポートを何も設定していないために、スマホで「PC版の縮小」として表示されてしまっている、ということだと思います。
<meta name="viewport" content="width=device-width,initial-scale=1">のように<head>内で指定しましょう。
投稿2017/03/14 07:37
総合スコア145183
コメントありがとうございます。
記述しておりませんでした。
headタグ内に記述して表示させたところ、ランディングページの画像・文章がスマホの画面縦左半分に縮小して表示されてしまいました。
0
ベストアンサー
viewportは記述されていますか？
もう逃げない。HTMLのviewportをちゃんと理解する
投稿2017/03/14 07:36
総合スコア4437
コメントありがとうございます。
記述しておりませんでした。
記述して表示させたところ、ランディングページの画像・文章がスマホの画面縦左半分に縮小して表示されてしまいました。
0
http://dev.classmethod.jp/smartphone/device-media-queries/
これだと480px以下の時にdisplay:noneになるので動きが違うのではないでしょうか
現在481px以上で表示すると改行されます
すいません間違いました。取れるを変な風に見てしまいました
投稿2017/03/14 07:43
編集2017/03/14 07:45
総合スコア1820
あなたの回答
tips
プレビュー
