スマートフォン対応の件

すごく原始的な対応方法で、何ら目新しいことが含まれてないエントリですが、自分向けのメモとして。

このブログはwordpressが対応してくれてるのか、初期設定のままで(もちろんJavaやcanvasは走りませんが)問題なく表示されてるんですが、ドメインのインデックスページが何か変。

様々なサイトを漁りまくって、言われるがままにコードをいろいろ書き直して試行錯誤しても上手く行かず。viewportの記述を加えると変な風に崩れるし、Media Queriesもなぜか期待通りの動作をせず。

結果的に上手く行ったので、やったことを書き残しておきます。

参考:初めてスマートフォン専用ページを作成する際に知っておきたいポイント

1) -webkit-text-size-adjust : none; を記述。縦横で勝手にフォントサイズを変えさせない。

2)@media screen and (max-width: 480px) { body { font-size: 0.7em; } } を記述。フォントを小さくする。

やったことはこれだけw 原始的すぎる。まぁ、そっけないインデックスページなんだから当然なんだけど。

で、ポイントはMedia Queriesの書き方の説明がサイトによってちょっと違うこと。基本を理解してないのが悪いんだけど、間違った書き方で書いちゃって動かなくて試行錯誤w

もう余計なことはしないで、次からはこのやり方で行きます。