【いまスニ】viewportの設定を端末毎に出し分ける！※デモあり※
「いまスニ」とはいまさら感漂うスニペット集をまとめる記事です。
第二回としてはスマートフォンサイトやレスポンシブサイトには欠かせない「viewport」の設定について書いてみたいと思います。
では早速コードを書いておさらいしていきましょう。
HTMLタグのおさらい
|
1 |
<meta name="viewport" content="width=device-width"> |
基本的なviewportの設定はこれだけで完了。
contentプロパティにはwidth以外にもいろいろとオプションがありますので、少し触れておきますね。
| 値 | 設定可能な値 | 説明 |
|---|---|---|
| width | 正の整数または文字列 device-width | ウェブサイトを描画したいビューポートの幅をピクセル数で定義します。 |
| height | 正の整数またはテキスト device-height | ビューポートの高さを定義します。どのブラウザーでも使用されていません。 |
| initial-scale | 0.0 から 10.0 までの、正の数値 | デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率を定義します。 |
| maximum-scale | 0.0 から 10.0 までの、正の数値 | ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
| minimum-scale | 0.0 から 10.0 までの、正の数値 | ズームの最小値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
| user-scalable | yes または no | no を設定すると、ユーザーはページのズームができなくなります。既定値は yes です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。 |
引用：<meta>: 文書レベルメタデータ要素（MDN web docs）
上記のようにいろんな設定ができます。
サイトのユーザビリティに合うように、色々とカスタマイズしてみてください。
こんな時に使えるviewportの出し分け
レスポンシブサイトの制作では、HTMLはワンソースになるため、基本的にはどの端末でも同じviewportを使うことになりますよね。
固定幅のデザインで、タブレットはPCと同じデザイン、スマートフォンのみにブレイクポイントを作るなんてことはよくあることです。
そうすると、スマートフォンもタブレットも一つのviewportを見るため、タブレットで見た時に妙に大きなサイズで表示されるなんてことも・・・。
これは、PC用に指定した固定幅（よくある1000pxとか1200pxとか）がタブレット端末の横幅よりも大きく描画されてしまうことが原因です。
そんなときのために、タブレットとタブレット以外の端末でviewportの設定を出し分けていきたいと思います。
ユーザエージェントによる出し分けとサンプル
headタグ内のできるだけ上の方に以下のソースを記述するだけ！
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var contentWidth = 1240; // コンテンツの幅に合わせて修正してください var ua = navigator.userAgent; // ユーザーエージェントの取得 if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){ // タブレット端末だった場合の処理 document.write('<meta name="viewport" content="width=' + contentWidth + '">'); } else { // タブレット端末ではない場合の処理 document.write('<meta name="viewport" content="width=device-width">'); } </script> |
このコードを実際に使ってサンプルを作ってみましたので、各端末でどのように表示されるか確認してみてください。
サンプル
まとめ
いかがでしたでしょうか！
ユーザエージェントによる条件分岐のところを色々といじってみれば、スマートフォンだけ、iOSだけといったいろんなことに応用することも簡単です。
用途に合わせて色々カスタマイズしてみてくださいね。
過去のいまスニ！
第一回 【いまスニ】いまさら感漂うスニペット集 簡単スムーズスクロールのアレンジ※デモあり※
by ピロシキ
