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

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

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

を加えよ。

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

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

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

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

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

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

pre { overflow: auto; }

を加えよ。

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

tableなどをdivタグに入れて同様にできる。

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

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

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

img { max-width:100%; } 

を加えよ。

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

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

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