742 views
この記事は最終更新から 1303日 が経過しています。
1. 悩みごと
レスポンシブサイトの制作を始めて 5年が経過した。
今まで、以下のような三種類の実現方法を用いて色々なサイトを作ってきた。
(1) 方法1 : ブラウザ種別を参照して出力コードを変更する。【サーバー側】
一番最初に覚えたのがこれだ。
自分が作る WEBサイトの 80%以上は、Apache等の WEBサーバー経由で PHPプログラムを起動して、動的に HTML文を出力するもの。
サーバー側の PHPプログラムでは、
$_SERVER[‘HTTP_USER_AGENT’]
を覗くと、閲覧者の WEBブラウザが申告してきたブラウザ名が見える。
この値からパソコン, スマホ or ガラケーを判別し、サーバー側ではそれぞれに向けたデザインの HTML文を生成＆出力していた。
つまり、サーバー側では…
閲覧者の WEBブラウザからアクセスがあるたびに、
サーバー側で閲覧者の環境を意識して
出力する HTMLコードを決めていた。
(2) 方法2 : メディアクエリを使って適用するCSSを切り替える。【クライアント側】
次に覚えたのがこれだ。
今でも主にこれを使用している。
上記の「方法1」とは異なり、
WEBサーバー側では、リクエストに対して閲覧者の使用環境を意識しない。
画面サイズに応じた複数種類の CSS（パソコン用 or スマホ用）をあらかじめ用意＆提供し、
閲覧者の WEBブラウザ側で、自らの画面サイズに応じて「どの CSSを使用するか」を決めてもらう。
まぁ、作る側からするととっても便利なのだが、CSSの差し替えで複数レイアウトを実現しようとすると、いろいろと問題もある。
【問題点1 】
「パソコンでは使用するけどスマホでは使用しない or その逆」など、
閲覧者側にとって不要なコードが多く渡ってしまう。
【問題点2】
作り手側はパソコン、スマホで共通のコードを使いたくなり、
ついついスマホ迎合型のデザインになってしまう。
つまり…
パソコンでの閲覧時に大画面を活かしきれていない「物足りないデザイン」になってしまう。
(3) 方法3 : メディアクエリと viewportの合わせ技【クライアント側】
個人的な問題かもしれないが…
スマホ迎合型になる
という「方法2」の問題点を解決すべく採用している手段だ。
最近のマイブームがこれだ！
この方法が適さない場合もあるので、適材適所で使用している。
この方法が適するケースとは？
小さなスマホ画面だからと大雑把なレイアウトにせず、
一覧性があり、俯瞰的に眺められると便利なページ！
具体的には、セル数の大きな表を眺めたい時、
スマホ画面からはみ出た部分をスクロールして眺めるよりも、
表を俯瞰した状態から着目したいポイントをクローズアップして眺めたい、
というような場面で使用する。
viewport以外にも同じことの実現手段はあるが、viewportを使うのが楽だ。
2. 方法3の具体的な実現方法
HTMLの HEAD部分に以下のように書く。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta id="myVP" name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery-3.5.1.min.js"></script>
<script src="myscript.js"></script>
5行目 : viewportの初期値を以下のように設定する。
width=device-width : 画面幅いっぱいに表示する。
initial-scale=1.0 : 拡大率は 1.0, すなわち拡大・縮小せずに表示する。
6行目 : 今回は JQueryを使うのでこれをロードする。
7行目 : viewport設定更新のためのスクリプトをロードする。
myscript.js
$(function() {
var fw = (window.orientation % 180 == 0)? screen.width : screen.height;
if(fw < 768) {
document.getElementById("myVP").setAttribute("content","width=767px");
}
});
1行目 : ドキュメントをロード時に実行する。
2行目 : スマホの傾きを確認し、傾けられているならば画面幅=スマホ画面の高さとする。
3,4行目 : iPadの画面高さ 768pxを閾値とし、これを下回る画面サイズの場合には767px固定幅表示とする。
※つまり、iPhone5のような小さな画面では、縮小表示される。→ これにより全体を俯瞰可能になる。
3. サンプルページを作って動作確認
以下のようなコードを書いて WEBブラウザで表示してみる。
動作確認のためのサンプルページ
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta id="myVP" name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery-3.5.1.min.js"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>表示幅によって枠線の色が変わります。</div>
</body>
</html>
myscript.js
$(function() {
var fw = (window.orientation % 180 == 0)? screen.width : screen.height;
if(fw < 768) {
document.getElementById("myVP").setAttribute("content","width=767px");
}
});
style.css
@charset "UTF-8";
/* パソコン用 : iPad以上の大きな画面 */
@media (min-width: 768px){
div{
border: 3px #f00 solid; /* 赤枠 */
}
}
/* 大画面スマホ用 : iPhone6 Plusなど */
@media (min-width: 411px) and (max-width: 767px){
div{
border: 3px #0f0 solid; /* 緑枠 */
}
}
/* 小画面スマホ用 : iPhone5, iPhone6など */
@media (max-width: 410px){
div{
border: 3px #00f solid; /* 青枠 */
}
}
(1) iPadサイズ(768 x 1024)では？
CSSのメディアクエリで書いた通り、赤枠で表示された。
(2) iPhone6 Plusサイズ(414 x 736)では？
CSSのメディアクエリで書いた通り、緑枠で表示された。
因みに…
index.htmlの 7行目をコメントアウト、すなわち viewport更新のためのスクリプトを実行しないとこうなる。
横幅が 727pxではなく 414pxで表示されるから、文字が等倍（＝上のように縮小なしで）表示されている。
(3) iPhone6サイズ(375 x 667)では？
CSSに従えば青枠になるはずだが、緑枠で表示されている。
∵viewportの指定により、横幅727pxで表示されているから！
因みに…
index.htmlの 7行目をコメントアウト、すなわち viewport更新のためのスクリプトを実行しないとこうなる。
横幅が 375pxで表示されるから、CSSに従って青枠で表示されている。
4. 所感
・viewportで widthの設定は Google非推奨だそうなので、SEO的に不利になるのかな？
・普段は使用しなくても、ユーザーが「全体を俯瞰したい」と思ったときに viewportを広げる操作ボタンを用意してあげるのが親切かな。
5. 謝辞
有用な情報をありがとうございます。M(_ _)m
https://qiita.com/haru52/items/43f68c8d5adbbfc89b4d