マルチデバイス対応HPをPCとスマートフォン2種類の固定デザインCSSで制作可能にする手法

2018年11月28日2020年5月2日

Script

スマホ対応といえばレスポンシブWEBデザインと考えられがちです。
当社も最初はレスポンシブWEBデザインを推奨していました。
しかし、フルレスポンシブはあまりにも無駄が多いと気づいたのです。

レスポンシブWEBデザインのデメリット

レスポンシブWEBデザインのデメリットとしては以下のようなものが上げられます。

データ量が大きくなる
制作工数が大きくなる
デザインを固定することができない

WEBデザインで最も致命的なのはデータ量が大きくなってしまうことでしょう。
これは画像データをPCとスマホで共通で扱ったり、Retinaディスプレイに対応することに起因します。

また、工数の増大はあらゆる画面幅に対応したデザインをメディアクエリで切り分けていくコーディング手法に問題があります。
レスポンシブWEBデザインはPC小、PC大、タブレット、スマホといった複数のCSSが必要となります。

さらにリキッドデザインが前提となるのでデザインが変化します。
そのため、最良のデザイン（※）を維持することが難しくなります。

メモ
※ここで言う「最良のデザイン」とは、ユーザーをWEBコンテンツに誘導するために必要十分なレイアウトである…ということです。

2種類のCSSでPCとスマートフォン両対応のデザイン

前述したデメリットを回避する最もよい手法と考えられるのはリキッドデザインを止め、「viewport」を固定幅にすることです。
そしてPC幅とスマートフォン幅の「viewport」を動的に切り替えればよいのです。

そうすることで以下のようなデザインが可能となります。

PCとタブレットを共通デザインにできる
スマートフォンを固定デザインにできる

前者によってタブレット用の中間幅のCSS作成を省略できます。CSSはPC用とスマートフォン用の2種類でよいわけです。
後者によってスマートフォンのデータ容量を削減できます。

ではどうやって「viewport」を動的に変更するのでしょうか？
JavaScriptを使えば実現出来ます。

「viewport」を動的に変更するJavaScript

前述のデザインを可能にするために「viewport」を動的に変更するJavaScriptを作ります。

以下のページが参考になります。

参照 metaのviewportの値を動的に変更するJavaScript（briccolog）

しかし、今回のテーマはスマートフォンも固定CSSでデザインを決定づけることなので、上記ページのスクリプトでは失敗してしまいます。
原因はイベントハンドラによってJavaScriptを実行させるためです。

スマートフォンはスクロールによっても「resize」イベントが発生します。
また、ある種のタブレットでは「orientationchange」イベント発生時に固定したはずの「viewport」の幅がリセットされます。

以上のような現象を回避することは簡単です。

イベントによるJavaScriptのトリガーを削除してしまえばよいのです。

HTMLとJavaScript

長々と解説しましたが、以下が実際のHTMLとJavaScriptです。

HTMLソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<script src="common/js/view.js" type="text/javascript"></script>
（以下省略）

view.js

var baseW = 751;	//基準となるブレークポイント

var viewportContent;
var w = window.innerWidth || document.documentElement.clientWidth || 0;
if(w >= baseW){
	viewportContent = "width="+"1200"+"px,user-scalable=yes,shrink-to-fit=no";
}else{
	viewportContent = "width="+"750"+"px,user-scalable=yes,shrink-to-fit=no";
}
document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent);

ブレイクポイントは751としました。
スマートフォンを2018年時点で最も多い375×667のサイズの2倍でデザインするためです。

こうすることでretinaディスプレイにも対応できます。

by T.Y.