スマホもしくは携帯電話向けのページ設定

先月の終わりに SIM フリーのスマートフォンを手に入れた。SIM はデータ通信専用のものを契約したので通話はできない。電話はまったく使わないので問題なし。

専ら家内 LAN に Wifi 接続して使っているのだけれども、Mac Book Pro よりも使う頻度が高くなってしまったのは意外だった。

考えてみれば当然のことで、布団の中で寝転がって使えるのが寒い冬にはありがたく便利なのだ。何せ暖房が無いものだから、部屋の中ではシュラフか布団の中に入っているしかないのだ。

長文を入力することがなくなった点も関係がありそう。能動的に発信するよりも、受動的に受信する方が楽だし、そもそも何かを表現したいという気力がなくなった。歳のせいかなぁ…。

さて、自分の作成しているサイトをスマホで閲覧すると文字が小さくてスワイプして拡大しないと読めないことに気付いたので対策をすることにした。

最初の対応策では CSS でフォントサイズを 2 倍にして調整したのだけれど、調べてみるとヘッダ部分に

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

を入れるだけでブラウザ側がよろしくやってくれるのだとか。便利だね。

余談ではあるけれど、普通に rackup をしただけでは外部装置からアクセスが出来ないように変更されたらしく、スマホからアクセスするためには

rackup -o 0.0.0.0

のようにオプションを付けなければならなかった。また、jekyll の場合は

jekyll serve --watch --host 192.168.0.1

などと IP アドレスを付けてやらないと外部からアクセスできないのだった。

これらは Mac Book Pro の中で完結していた頃には気付かなかったこと。