マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた

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を出し分ける方法が1つ。
      もうひとつが巷で噂の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を出し分けます。

この記事についたタグ
この記事を書いた人
ねづ
『NEZU.log』運営管理者。Webエンジニアの傍ら、趣味でこのブログを運営。シェアハウス在住。2015年は海外情報(主にアジア圏)と効率のよい生活の情報発信がテーマ。
この記事が面白かったらいいねしよう!
記事のタイトルとURLをコピーするコピーしました!
こちらの記事もどうぞ
こちらの記事もどうぞ

コメントを残す

コメント※必須
名前※必須
メールアドレス※必須(非公開)

マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた
このブログを書いている人

運営者 : ねづ

主にWebの企画、開発の仕事をしています。
海外が好きで、仕事、旅行問わずよく行きます。
フィリピン(セブ)で10週間留学後、現在はカナダ(バンクーバー)に滞在。留学、海外生活や旅行記をこのブログで書いています。

詳しいプロフィールはこちら

LINE@作成しました!お気軽にどうぞ!
友達登録は下記QRコードを読み取ってください
LINE@ QRコード

カテゴリ一覧
キーワードで記事を探す
下記から更新情報を受け取れます!