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

最も簡単にタブレットに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はそのサイトに合わせて変更してください。

Recruit

私たちは共に働く仲間を求めています。Web制作・広告運用・SEO対策・マーケティング・Web解析・メディア運用・ライティング・Webサービス開発が主な業務です。

PartnerShip

Web制作会社・広告代理店・デザイン会社・コンサルティング会社様

パートナー提携はコチラから

Contact

平日 9:30 - 19:00

TEL 06-6125-5439

無料相談

お問合せ

お見積もり