携帯・PC共用ページにするには

公開日 2017-9-10 更新日 2023-04-20

携帯端末の場合には横の画素数を360pxと考えさせる

<meta name="viewport" content="width=device-width">

を加えよ。

実際の画素数が1080pxあっても360pxであるかのように拡大して表示するようになる。

preや画像ではみ出すものがある場合は機種により縮小する場合がある。

この設定がない場合は980px、あるいはより広く表示しようとする。

PCにはこの設定は影響を与えない。

詳細はモバイルフレンドリーのまとめ。

幅を取るpreがある時はスクロールを指定する

pre { overflow: auto; }

を加えよ。

長くなるpreだけ独立に横スクロールするようになる。

tableなどをdivタグに入れて同様にできる。(下記参照)

ただし、preの行数が多い場合、スワイプでスクロールできないPCでは不便になる。

詳細は幅を取るpreのまとめ。

幅を取るtableがある時はdivタグなどで囲み、スクロールを指定する

htmlでは

<div class="tbl">
<table>
....
</table>
</div>

cssの指定は

div.tbl{
  overflow: auto;
}

<p>タグにはtableを入れることができないので注意。

大きな画像を自動で縮小させる

img { max-width:100%; } 

を加えよ。

imgタグの親要素のmarginやpaddingも考慮して最大幅まで縮小する。高さは指定しなければ縦横比は変化しない。

小さな画像を拡大することはないので、PCでも邪魔にならない。

詳細は大きな画像のまとめ。

イメージタグに大きさを指定している場合、高さが指定のものになって縦横比が狂う。そんなときは、

img {
  max-width:100%;
  height: auto;
}