PC用とスマホ用の表示切替をCSSだけで行う
サイトを作成したら、とりあえずPC用として公開する方も多いはず。
しかし、近年はスマホの需要が上がってきたので、公開してしばらくしたらスマホ用にも対応させたかったりする。私もそうでした。もちろんスマホでもPC用サイトは閲覧可能ですが、ユーザビリティを考えると、スマホ用としての表示があった方が無難です。
どうせなら、スマホ用サイトを新たに作成するより、同じコンテンツを利用し、cssだけ変更するだけで表示が変わる方がサイト作成においては断然楽なはずです。
そこで、HTMLヘッダ部分にちょっと手を加えます。
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no"> <link media="only screen and (max-device-width:480px)" href="./css/smartphone.css" type="text/css" rel="stylesheet" /> <link media="screen and (min-device-width:481px)" href="./css/common.css" type="text/css" rel="stylesheet" /> <!--[if IE]> <link href="./css/common.css" type="text/css" rel="stylesheet" /> <![endif]-->
media screenの480px以下をスマホと判断し、spartphone.cssを読み込み、481px以上であればPCと判断し、common.cssを読み込みます。
UAがIEの時はmedia screenが効かないので、common.cssを読み込みます。
と、ここで私のスマホで表示確認したら、PC用のcssが読み込まれている。
理由は簡単、私のスマホの解像度は『HD:1280×720』でした。481px以上なのでPC用のcssが読み込まれて当然です。
そこで最近のスマホ事情を考慮し、適当に1000px以下の場合はスマホ用css、1001px以上ならPC用のcssを読み込む設定にした。
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no"> <link media="only screen and (max-device-width:1000px)" href="./css/smartphone.css" type="text/css" rel="stylesheet" /> <link media="screen and (min-device-width:1001px)" href="./css/common.css" type="text/css" rel="stylesheet" /> <!--[if IE]> <link href="./css/common.css" type="text/css" rel="stylesheet" /> <![endif]-->
これで正常にスマホ用cssが読み込まれました。
あとはcssでスマホには必要のないコンテンツを無効にしたり、PC用ではWidthでpx指定した場所を『width:100%』にしたりして、調整を行ってください。