スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ホームページのモバイル対応

ホームページの主要なページをモバイル環境でも見やすくなるように対応しました。私のページをスマートフォンなどから見る人はいないだろうと思って何もしていなかったのですが、Search Consoleを使ってみたら40%ほどのアクセスがモバイルだったので急遽対応することにしました。

以前から、CSSを切り分けて対応できることは知っていたんですが、もう少しマシな方法がないかと思って調べてみたらありました。基本、1つのCSSで対応できる方法が。

【CSS】
@media screen and (min-width: 641px){
    /* ここにPC用のスタイルを定義 */
    div#Hoge {
        position: relative;
        width: 640px;
        position: border: solid black 1px;
    }
}
@media screen and (max-width:640px){
    /* ここにモバイル用のスタイルを定義 */
    div#Hoge {
        position: relative;
        width: 100%;
        position: border: solid black 1px;
    }
}
/* ここに共通のスタイルを定義 */
・・・

このようにデバイスの解像度によって切り分けると。
で、調べて知ったのですが、モバイル用のブラウザは仮想的な画面解像度によって動作するので上のように実際よりも小さな解像度を指定すると上手く行くようです。

【HTML】
<meta name="viewport" content="width=device-width, initial-scale=1">

もう一つ、上記のようにview-pointを指定しないとスタイルシートの設定が有効になりません。

私の場合はこの対応だけでほとんど対応できたので手間も大してかからず助かりました。
スポンサーサイト

コメント

非公開コメント

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。