HTMLをワンソースとしたマルチデバイス対応が一般的になってくるであろうということもあり、いろいろと知識や技術面で必要な要素が多いので、いったんの整理も兼ねてまとめてみました。
スマホ、タブレットに対応させるための方法として、やることは主に以下の二つです。
- 1,viewportの設定
- 2,cssの出しわけ
-
それぞれまとめてみました。
目次
viewportの設定
viewportとは、スマートフォンのブラウザのウィンドウサイズに該当するものです。
一方、スマートフォンの画面サイズ、いわゆるdevice-widthは980pxもありません。iPhoneでいえば、viewportは横幅980px、device-widthは横幅320px、縦幅480pxです。
通常のPCサイトを見ると、ブラウザ上で縮小されて表示されます。例えば、コンテンツ幅が800pxのサイトでは、縮小されて横幅が左右合計180pxの余白がでます。また、スマホの画面サイズが横幅320pxなので合わせてサイトを設計しても、viewportを設定しないと、660px(980px-320px)の余白ができ、かなり縮小されて表示されてしまいます。
そこで、viewportの設定が必要となります。
viewportはmetaタグを用いて以下のように記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
name属性に”viewport”と記述し、content属性に内容を記述していきます。
content属性に記入できる内容は以下の通りです。
| width | viewportの横幅 |
|---|---|
| height | viewportの縦幅 |
| initial-scale | 初期の倍率 |
| minimum-sacle | 倍率の最小値 |
| maximum-scale | 倍率の最大値 |
| user-scalable | 拡大縮小の可否 |
初期値は端末によって異なるため、除いてあります。
それぞれpxや乗数で入力して調整できますが、ほとんどの端末にもれなく対応するためには、以下のように記述するのがベターかと思います。
<!-- ▼ユーザーの拡大、縮小あり --> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- ▼ユーザーの拡大、縮小なし --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
user-scalable、つまりユーザーの拡大と縮小の可否で分けてあります。ユーザーはデフォルトで拡大できると認識していることがほとんどだと思うので、基本的には拡大縮小は可能にすべきだと思いますが、拡大させたくない場合は2番目のように記述します。
androidにおけるviewportの扱い
viewportはもともとiphoneのsafariの仕様ではありますが、一応androidでも実装されています。android developersのサイトによれば、OS2.0以降はviewportの設定が効くという話ですが、端末によっては効かなかったりするらしいです。検証したわけではないので、なんとも言えませんが…。
画面を横にしたときのviewportの扱い
画面を横にすると、当たり前ですが画面幅の縦と横が逆になります。iPhoneでいえば、480px×320pxになります。画面を横にした場合は、viewportが320pxから480pxになるのが通常の解釈です。しかし、どうやらviewportはデバイスの向きを変えても、読み込み時のviewportは固定されるらしいです。つまり、user-scalableをyesにしていると、320pxのまま、画面幅maxまで拡大されてしまいます。
このように、user-scalableをyesにしていると、初期表示の時点でブラウザからコンテンツがはみ出してしまいます。ユーザーはどんな時に横にしてブラウジングするかは分かりませんが、この崩れを避けるにはuser-scalableをnoにしたほうが無難です。ユーザーの拡大縮小操作が犠牲になってしまいますが…。ちなみに、自分はnoにしています。
以上、viewportについてのまとめでした。viewportはマルチデバイス対応に限らず、スマホサイト、タブレットサイトを作成する場合は基本的に設定したほうがいいです。
CSSの出し分け
続いてCSSの出し分けについてです。よく言われる方法は主に3つ。
php、javascript等のuseragentでcssを出し分ける方法が１つ。
もうひとつが巷で噂のcssのmediaqueriesの機能を用いた方法です。
前者はuseragentで条件分岐してcssを書き出すだけです。ちなみに、こんな感じになるかと。
(function(){
var ua = {
iPhone: navigator.userAgent.indexOf('iPhone') != -1,
iPad: navigator.userAgent.indexOf('iPad') != -1,
iPod: navigator.userAgent.indexOf('iPod') != -1,
android: navigator.userAgent.indexOf('Android') != -1,
windows: navigator.userAgent.indexOf('Windows Phone') != -1
}
if(ua.iPhone || ua.iPad || ua.iPod || ua.android || ua.windows){
document.write('<meta name="viewport" content="initial-scale=1.0">\n');
document.write('<link rel="stylesheet" type="text/css" href="SP.css" media="screen">\n');
}else{
document.write('<link rel="stylesheet" type="text/css" href="PC.css" media="all">\n');
}
}());
上の例はスマホ、タブレットだった場合、meta(viewport)とlink(デバイス別CSS)を、それ以外の場合はPC用のCSSを書き出しています。見ての通り、useragentの記述とあまり変わりません。条件分岐後の処理がURLの移動なのか、CSSの振り分けなのかの違いです。
なので、今回はCSSのmediaqueriesの機能をまとめてみます。
mediaqueriesとは
mediaqueries(メディアクエリー)とは、HTML4、CSS2からあるmediatype(メディアタイプ)の拡張機能です。mediatypeとはCSSをスクリーン、テレビ、プリンタなど媒体に合わせて出し分ける機能です。mediajqueriesでは、より詳細にCSSを出し分けることができます。様々な条件をもとに分岐を設定できるのですが、マルチデバイス対応においてはスクリーンタイプの幅をベースに分岐させます。
記述は以下のようになります。
<link href="small.css" rel="stylesheet" media="screen and (max-width: 580px)" />
特筆すべきところは、media属性です。
「media=”screen and (max-width: 580px)”」
と書いてあります。
これは、mediatypeがscreenの場合で、max-width、すなわち画面幅が580px未満の場合にこのCSSを読み込ませるというものです。
<!-- 1) 画面幅が501px～800pxの場合 --> <link href="small.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 800px)" /> <!-- 2) 画面幅が500px以下の場合 --> <link href="x_small.css" rel="stylesheet" media="screen and (max-width: 500px)" />
もちろん、iPadでは(1)が、iPhoneでは(2)と同じスタイルが適応させているのを確認できるかと思います。また、上記の例では、ファイルごと出し分けをしましたが、一部スタイルのみを適用させることもできます。その場合は下記のように記述します。
@media screen and (max-width: 500px){
.hoge {
background-color: #cccccc;
}
/* 続けて入力可能 */
}
画面幅が500px未満の場合のみ、hogeというクラス名を持つ要素にスタイルが適応されます。
デバイスに向けたCSS出し分けの際では、あまり用いることはないと思いますが…。
こんな感じで、各デバイスに合わせてCSSを出し分けます。
