- 1. 概要
- 2. 判断
- 3. どう書くか
1. 概要
他のページで、メディアクエリについて記述しておる箇所がありますが・・・。
画面サイズでいちいち切り替えていたら、結構、きりがないのだ。
新しい機種が出るたびに書きかえるのも疲れたし、メディアクエリの記述は面倒なのです。
しかし、「Google Search Console」あたりで「モバイルユーザビリティの問題があります」というのが、やたらたくさんでたりします。
これを解決するのは、「.css」（まぁ本サイトの場合「.scss」だったりしますが）でやるのが手っ取り早い。
でまぁ、メディアクエリで分けるのでなく、アクセス元が「PC」なのか「Mobile」なのかは「.php」で判断して、そこから使用する「.css」を「PC」と「Mobile」で分けるのが、ワタクシ的には楽であると判断した次第です。
2. 判断
では、アクセスしているの相手が「PC」か「Mobile」かを判断するのは・・・。
「PHP」で、有志が提供しているモジュールを使用します。
これに関しては、「PHP - スマフォ判定」をご参照ください。
3. どう書くか
では、「.scss」をどう書くかちゅうと。
「PC」用の場合は、大体、実際にブラウザで見ながら書いているので、細かく設定して、問題ないように思われます。
で、これをそのまま「Mobile」に適用すると多くは、このサイトの場合。
・コンテンツの幅が画面の幅を超えています
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます
てな警告を受けます。
これ、上の２つは、大体、コンテンツが画面の幅をはみ出ちゃってるのですな・・・。
下の１つは、行間が狭いと言われちゃうようです。
わたしは、これを解決するのに、上の２つは、要素のいくつかで
width: xxpx;
と書いておるのが、画面サイズをはみ出す要因になっています。
これを、「Mobile」用の場合、おおよそ
width: xx%;
に書き換えて、「100%」より、幾分小さい値を設定するようにしています。
次に行間に関して、目次等で、リンクをずらずらと並べているような場合
line-height: 2em;
を基準として、少し広めにしたりして、調整しています。
およそ、この２つを調整することで、本サイトの「モバイルユーザビリティ」の問題の多くは解決しました。
|
