2020-06-07-Sun スマホ対応
_ [Web] 遅ればせながら
この日記をスマホ対応にしました。
今までも見られなかったわけじゃないんですが、幅が小さかったりして見辛かったんです。知ってはいたんですけど、微妙に面倒だったので、つい先延ばしに。
でも、この日記を始めた17年前！とはWeb環境は大きく変わり、この日記もいまやモバイル端末でのアクセスが3/4近くを占めるようになった今日この頃、なんとかしないとイカンというわけで、ようやく重い腰を上げました。
この日記の表示フォーマットを決めているCSSに、下記内容を追加。スマホ端末からアクセスが有ったときのフォーマットを再設定してみました。
@media screen and (max-device-width: 480px) {
div.sidebar {
display: none;
}
div.main {
width: 100%;
}
div.day {
border-style: none;
border-width: 0px;
margin: 0px;
padding: 0px;
}
div.section p {
margin: 0.5em 0.1em 0.7em 0.2em;
line-height: 150%;
}
}
結果的にはこれだけなんですけどね。
手持ちのAndroidとiPhoneで確認したところは良くなったと思うんですが、どうでしょ。
画像の画面最大幅へのリサイズはまだ対応できず…。
[ツッコミを入れる]