最も簡単にタブレットにPCデザインを縮小表示する方法【WordPressの条件分岐】

タブレットのCSSは書かずに、PCサイトのデザインをそのまま表示させる方法を紹介します。

タブレットでのアクセスはほぼない場合や、予算が合わない場合に対処法として使えます。

functions.phpにスマホ判定の関数を書きます。

<?php
function is_mobile() {
	$useragents = array(
		'iPhone',
		'iPod',
		'Android',
		'dream',
		'CUPCAKE',
		'blackberry9500',
		'blackberry9530',
		'blackberry9520',
		'blackberry9550',
		'blackberry9800',
		'webOS',
		'incognito',
		'webmate'
	);
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
};
?>

次にheadタグ内に条件分岐でタブレットのみのviewport設定を記述します。

<?php if(is_mobile()):?> // スマホのviewport
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
	<?php elseif(wp_is_mobile()): ?> // タブレットのviewport
		<meta name="viewport" content="width=1280">
	<?php else:?> // PCのviewport
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
	<?php endif; ?>

contentの値1280はそのサイトに合わせて変更してください。