レスポンシブWebデザインでPCとタブレットのデザインを同じにする方法

スマートフォンとPCのデザインを、CSSのメディアクエリを利用して
レスポンシブWebデザインで切り替えているWebサイトにおいて、
タブレットのデザインをPCを縮小表示させる方法を紹介します。

レスポンシブWebデザインでWebサイトを制作した際、悩ましいのは、タブレットのデザインです。
基本的にはPCと同じデザインにしたいけど、横幅を全てパーセント設定するのはややこしいし...と思うことは、しばしばあります。
PCのデザインを縮小表示できれば、タブレット用のCSSを設定する必要がないので楽ですよね。

viewportをスマートフォンとタブレットで切り替えることで実現可能です。

PCの場合、viewportをどんな設定にしていても、ブラウザウインドウの表示領域がviewportになります。要は、viewport設定はPCには関係ないと思ってもらって結構です。

スマートフォンの場合は、メディアクエリでスマートフォン用のデザインで設計しているので、「viewport」の値は「device-width」にします。

一方、タブレットは、見やすいように、テンプレートより左右に少し余白を設けた幅を設定します。例では、一般的な画像解像度である、SXGA(1280×1024px)を想定しています。もし、テンプレートの横幅が小さい場合、余白が多くできてしまうので、テンプレートデザインに合わせて横幅を変更してください。

HTMLのソースコードは以下のとおりです。「viewport」の切り替えは、外部JavaScriptファイル(js/viewport.js)にて設定するようにしています。
また、jQueryを利用するので、jQuery本体も以下のサイトからダウンロードしてください。

HTML5コード

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/viewport.js"></script>
</head>
<body>
</body>
</html>

デバイス(ユーザエージェント)で判別する場合

タブレットと判別するには、UserAgentの違いによって判別する方法があります。タブレットも種類によって画面解像度に幅があるので確実にタブレットだけに対応させたい場合は、この方法を採用するのが好ましいです。

以下のソースコードを「js/viewport.js」に記述します。

JavaScripコード

$(function(){
	var _ua = (function(u){
	return {
		Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) 
		 || u.indexOf("ipad") != -1
		 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
		 || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
		 || u.indexOf("kindle") != -1
		 || u.indexOf("silk") != -1
		 || u.indexOf("playbook") != -1,
		Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
		 || u.indexOf("iphone") != -1
		 || u.indexOf("ipod") != -1
		 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
		 || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
		 || u.indexOf("blackberry") != -1
	}
	})(window.navigator.userAgent.toLowerCase());

	if(_ua.Tablet){
		$('meta[name="viewport"]').attr('content', 'width=1280, maximum-scale=1, user-scalable=0');
	}
});

尚、このスクリプトは以下のWebページからお借りしました。

ブラウザの横幅で判別する場合

例えば、主にipadでPCのデザインを縮小表示させたいのであれば、ブラウザの横幅を判定に使うのもありです。

以下のソースコードを「js/viewport.js」に記述します。

JavaScripコード

$(function(){
	// ブレークポイントを設定
	var breakpoint = 768;
	// ウィンドウサイズを取得
	var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0;

	// ウィンドウサイズがブレークポイント以上の場合
	if(windowWidth >= breakpoint) {
		$('meta[name="viewport"]').attr('content', 'width=1280, maximum-scale=1, user-scalable=0');
	// ウィンドウサイズがブレークポイント未満の場合
	} else {
		$('meta[name="viewport"]').attr('content', 'width=device-width,initial-scale=1');
	}
});
投稿日:2018年1月10日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top

ホームページ作成に役立つコーナー

2018:01:10:23:28:41