お絵かき掲示板をスマートフォン対応にする

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportを指定します。PC用の解像度で表示しなくなるので、文字が小さすぎて読めない、クリック可能な要素が近すぎるといった問題を回避する事ができます。
ビューポートを設定する  |  PageSpeed Insights  |  Google Developers

ビューポートは携帯端末でのウェブページの表示方法を制御します。ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

お絵かき掲示板をスマートフォン対応にする

ブラウザの幅をせまくすると文字が縦並びになって読みにくいので…。

お絵かき掲示板をスマートフォン対応にする

ここからブラウザの幅をせまくすると…。

お絵かき掲示板をスマートフォン対応にする

コメントが画像の下に回り込むように設定。
<div class="message">
蒼の六郷の昴さん。
</div>

.messageの幅が200pxより小さくならないようにして、それよりブラウザの幅がせまい時はカラム落ちさせます。
.message {
min-width:200px;
display: table;
}

コメントの横幅が200pxより小さくならないように指定。
min-width:200px;だけではうまくいかないので、display: table;を使いました。

お絵かき掲示板をスマートフォン対応にする

ブラウザの横幅にあわせて画像を縮小。
img {
max-width: 100%;
height: auto;
}

お絵かき掲示板をスマートフォン対応にする

ChromeでiPhoneをエミュレート。

スマートフォンに対応させたお絵かき掲示板はこちら。