デバイスに応じたViewportの切り替え方法
レスポンシブデザインでWebサイトを制作する際、viewportの設定は<meta name="viewport" content="width=device-width, initial-scale=1">と指定することが一般的です。
しかし、案件によっては「iPadなどのタブレット端末では、スマートフォン向けの表示ではなく、PCサイトの固定幅（例：width="1080"）で見せたい」といった要件が出る場合があります。
そんな時に役立つ、デバイスのユーザーエージェント（User Agent）を判別してviewport設定を動的に切り替える方法を、PHPとJavaScriptそれぞれでご紹介します。
PHPで切り替える方法
サーバーサイドでPHPが利用できる環境であれば、以下のようにユーザーエージェントを判別して<head>タグ内に出力するmetaタグを切り替えることができます。
下記の例では、iPhone、iPod、Android（Mobile）をスマートフォンと判定し、それ以外（iPadやPCなど）では幅を1080pxに固定しています。
<!-- viewport -->
<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($user_agent, 'iPhone') !== false) ||
(strpos($user_agent, 'iPod') !== false) ||
(strpos($user_agent, 'Android') !== false && strpos($user_agent, 'Mobile') !== false)) :
?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php else: ?>
<meta name="viewport" content="width=1080">
<?php endif; ?>
<!-- /viewport -->JavaScriptで切り替える方法
PHPが使えない静的なHTMLファイルなどでは、クライアントサイドのJavaScriptを用いても同様の実装が可能です。こちらも<head>タグ内に記述します。
PHPの例と同様に、ユーザーエージェントを判定し、動的にmetaタグ（viewport）を生成して<head>に追加します。
<script>
// viewportの設定
(function() {
var ua = navigator.userAgent;
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
if (ua.indexOf('iPhone') > 0 ||
ua.indexOf('iPod') > 0 ||
(ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
// スマートフォンの場合
meta.setAttribute('content', 'width=device-width, initial-scale=1');
} else {
// スマートフォン以外（iPad、PCなど）の場合
meta.setAttribute('content', 'width=1080');
}
document.getElementsByTagName('head')[0].appendChild(meta);
})();
</script>※JavaScript版では、document.getElementsByTagName('head')[0].appendChild(meta);によってmetaタグが<head>内の末尾に追加されます。
まとめ
今回は、PHPとJavaScriptを使ってviewportを動的に切り替える方法をご紹介しました。特定のデバイスで表示を変えたいという要件は意外と多いため、Web制作者の方はぜひ覚えておきましょう。
viewportの基本的な仕組みについて、より詳しく知りたい場合は以下の参考サイトも役立ちます。
よくある質問（FAQ）
Q1. なぜ、わざわざviewportを切り替える必要があるのですか？
A1. Webサイトの要件によっては、タブレット端末でスマートフォン用の縮小されたレイアウトではなく、PC用のレイアウトをそのまま表示したい（または特定の幅で固定したい）というニーズがあるためです。width=device-widthのままだと、タブレットでもそのデバイス幅に合わせた（多くの場合スマートフォンに近い）レイアウトになってしまうため、あえて固定幅を指定することでPCサイトの閲覧体験を提供できます。
Q2. コード例の「width=1080」という数字は何ですか？
A2. これは、スマートフォン以外のデバイス（iPadやPCなど）で表示させたいWebサイトの固定幅（単位: px）の一例です。PCサイトを制作する際の、コンテンツ全体の横幅（ラップする幅）に合わせて設定します。例えば、サイトの横幅が1200pxであればcontent="width=1200"のように、あなたのサイト設計に合わせて数値を変更してください。
Q3. PHPとJavaScript、どちらの方法を使うべきですか？
A3. どちらも同じ結果を得られますが、選択はサイトの環境によります。
PHP（サーバーサイド）が使える環境（WordPressなど）であれば、PHP版が推奨されます。ページが読み込まれる前にサーバー側でHTMLが確定するため、JavaScript版で起こりうる「一瞬レイアウトが崩れてから切り替わる」といったチラつきを確実に防げます。
JavaScript（クライアントサイド）版は、静的なHTMLファイルやPHPが使えない環境でも手軽に実装できるのがメリットです。