- 締切済み
スマホで表示するとwidthが適応しない。
WindowsのＰＣでは問題ないのですが、スマホでレイアウトを確認すると、width470pxで指定しているのに300ｐｘ位の幅で改行されてしまいます。 スマホを横にして幅広に表示させると下記sampleの文字は問題なく表示します。 また、sample2の文字（h4）はwidthを指定していないにも関わらず途中で改行されてしまいます。 どうすればスマホでも問題無く表示できるのでしょうか？ よろしくお願いします。 <div class="section"> <div class="box_l"> <p> sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample. </p> </div> <div class="box_r"> <p><img src="a.jpg" width="460" height="321"></p> </div> </div> <div class="clear"></div> <div class="section"> <h4>sample</h4> </div> .section { position: relative; width: 960px; margin-left:auto; margin-right:auto; margin-top: 50px;} .box_l p{ width:470px; float:left; text-align:justify;} .box_r p{ width:470px; float:right; text-align:justify;} .clear{ clear: both;}
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- anonymous（@phantom0112358）
- ベストアンサー率60% (6/10)
スマフォやタブレットなど様々な解像度が混在する環境では、pxなどの絶対値ではなく%などの相対値での指定が推奨されます。 <head>内にビューポートを指定してありますか？ <meta name=viewport content="width=device-width, initial-scale=1">
お礼
ありがとうございました。 やってみましたが… ＰＣでの表示位に大きくなり、左上から一部分が表示するようになってしまいます。難しいです。