先日行ったサイトのマルチスクリーン対応作業記録です。
おかげさまでサッカーブログの方はそれなりに読んで頂いている様で日々そこそこのアクセスがあります。で，私自身はサッカー場など出先でのSNSを除きほぼPCしか使っていないので気にしていなかったのですが，改めて確認したところブログへのアクセスは既に半数以上がスマホまたはタブレットなどのモバイル端末からになっていまして。試しにスマホで見てみたらPC用のレイアウトがそのまま縮小されていちいちピンチアウトしないと読めたもんじゃなかったのでこれは対応しなければ，となった次第。
とはいえ使っているCMSはスマホなんて無かった時代の古い物なのでテンプレートもマルチスクリーンには対応していません。自力でなんとかせねば，とGoogle先生に聞いたら意外となんとかなったのでここに作業記録を残しておきます。
まずcssをPC用とモバイル用に分けます。画面解像度で切り替えるので下記の様に記載，とりあえず幅1024px以上をPC，1023px以下はモバイルとしましたが場合によってはこの幅を変更したり800px辺りで更にタブレットとスマホを切り替えたりと色々出来るかと思います。
site.css
@media screen and (min-width: 1024px){
img{
max-width: 100%;
height: auto;
width: auto;
}
/* ここにPC用のcssを記述 */
}
site-mobile.css
@media screen and (max-width:1023px){
img{
max-width: 100%;
height: auto;
width: auto;
}
/* ここにモバイル用のcssを記述 */
}
今回は元々PCサイト用だったcssを複製してモバイル用に修正。ブロック要素のwidth指定調整とフォントサイズを一段階大きくしたくらい。あとmin-widthが指定されている場合値を小さくするなり%指定にしないと結局画面全体が縮小表示されてしまうので注意。
後は各htmlのヘッダに下記を追加。
<!-- viewport設定を追加 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- cssをPC用とモバイル用で別に用意し両方読み込み --> <link rel="stylesheet" href="./css/site.css" type="text/css" /> <link rel="stylesheet" href="./css/site-mobile.css" type="text/css" />
これでPCとスマホが切り替わる様になったのでついでにPC版のレイアウトも横長に拡張，これまではXGA前提だったので流石に時流に合わなくなっていました。PCでも低解像度だったりウィンドウ幅を狭めればモバイル表示へ切り替わることを確認，とりあえず手持ちのPCや端末ではまともな表示になったので今回はこれで対応完了。