ほんとは
某アニメのレビューをしようと思ってたんですが、予定を変えて昨日の話の続きをしようかなと。
昨日、トップページのスマホ対応化をしたって話したんですが、まぁちょっとバグってるところがあったので修正したんですよ。
具体的にいうと
view portの値が正しく指定されないという問題が。
横幅100%っつってんのに画面いっぱいに広がってくれないんですよね。PCだとちゃんと動くんですが、スマホだとなんか中途半端に広がらなくて・・・・・・。
で、その原因ですが
Viewportのtarget-densitydpiにtarget-densitydpi=device-dpiと指定するとおかしくなるというものでした。
具体的には
こちらのエントリを参考にしたんですが、なんかこれが原因かなぁと思って、取り外してみました。
するとちゃんと動くようになったのですが・・・・・・
日記ログが・・・・・・。
以前問題になっていた
Vhの値が正しく認識されないという問題はクリアできているようですが、横幅がデカくなりすぎてちょっとこれじゃまともに見ることすら許されませんね・・・・・・。
ということで、手を加えましょう。
日記のスマホ対応が遅れてた理由として
そもそもどんなデザインにすべきか思いつかないという問題がありました。
目次をどこに置くのかが非常に悩ましかったんですよね。左に置くのが邪魔だから消したかったんですが、上下に置くのも不便だし、プルダウンメニューは・・・・・・うーん。
で、今しがた解決法を思いつきました。
日記本文の幅をデバイスに合わせればいいじゃんということです。
具体的にはこうです。
vwという単位のおかげで、100vwとすればデバイスの横幅がとれます。
つまりこの値を右の記事本文を格納するコンテナに与えれば、上のような構造が取れるのです!
これで
目次がいつでも閲覧可と
快適に記事が読めるというのを両立することができました。
仕様が決まったので、旅行レポートの方も同じ形式にしました。これでだいぶ見やすくなったんじゃありませんか!?
そうそう、なんか
height:100%あるいは100vhにしてるのに横スクロールバー分だけ縦スクロールしてしまうというハマり方をしてたんですが、これはやはりviewportの設定がよろしくなかったようで。
とりあえず・・・・・・
<meta name="viewport" content="width=device-width,height=max-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
としておけばなんとかなると思います。
device-heightを設定するとなんかおかしくなるっぽいです。ピクセルの認識の仕方がたぶん違うんでしょうね。スマホって画面サイズの割に解像度結構大きかったりりますし。
で、こうしてhtmlなりbodyなりにheight:100%を指定すれば動くっぽいです。
あー疲れた。
日記の本文もスマホ対応してしまったので、無駄に縦に長くなってしまった目次もそのうちスマホでも閲覧しやすいようにレイアウト整えようかなーと思ってます。
横幅をフルに活用したデザインにしようかなぁと考えていますが、さて・・・・・・。
あるいは、javascriptで折りたたむのもありかなぁ・・・・・・。でもjavascript切られてたらどうしようもなくなるし、うーん。
他の手としては、年⇒月で選択するスタイルもありかなとは思います。
いっそ、このまま縦長のスタイルを維持してもいいかも知れませんね。人生の厚みというか・・・・・・。(何)
もーちょっといいのが思いつくまで保留で・・・・・・。
さて、はやくコメントフォームを復活させられるようにがんばりましょう(笑)