レスポンシブ

タブレット用デザインがない場合の対応方法｜PCデザインを流用する考え方

2026-04-03

タブレット表示でよくある悩み

タブレット表示をどう扱うかは、制作現場でよく悩むポイントです。

PCデザインをそのまま見せたい
スマホとは違うレイアウトにしたい
できれば実装コストは抑えたい

こういった理由から、「PCデザインを縮小して表示したい」と考えるケースもあります。

ネットでよく見かけるコード

ネットで検索すると、以下のようなコードをよく見かけます。

<script>
  $(function(){
    var ua = navigator.userAgent;
    if((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)){
$('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1">');
    } else {
$('head').prepend('<meta name="viewport" content="width=1240">');
    }
});
</script>

一見すると便利そうですが、この方法は現在ではおすすめできません。

この書き方が古い理由

❌ User Agent判定が非推奨

navigator.userAgent による判定は不正確で、新しいデバイスやブラウザに対応できない可能性があります。

❌ JavaScript依存

JavaScriptが無効な環境では動作しません。 viewportはHTMLで指定するのが基本で、JavaScriptで動的に変更する必要はほとんどありません。

❌ 保守性が低い

デバイスごとに条件分岐を増やす必要があり、コードが複雑になりやすいです。

❌ アクセシビリティの問題

user-scalable=no のような指定は、ユーザーの拡大操作を制限するため、アクセシビリティの観点から推奨されていません。

現在の基本は「デバイス幅に合わせる」

現在のWeb制作では、以下の記述が基本です。

<metaname="viewport"content="width=device-width, initial-scale=1">

なぜこの書き方が正しいのか？

この指定をすると、デバイスの画面幅に合わせてレイアウトが表示されます。

スマホ → スマホ幅
タブレット → タブレット幅
PC → PC幅

それぞれの端末に最適な表示になります。

「PCデザインの縮小表示」との違い

ここが重要なポイントです。
今回紹介したviewportは、PCデザインを縮小表示するためのものではありません。
あくまで、デバイスごとに最適なレイアウトを表示するための設定です。

まとめ

タブレット表示を考えるときは、

UA判定で出し分ける
JavaScriptでviewportを変更する

といった古い手法ではなく、
シンプルなviewport設定＋CSSでの調整
これが現在の基本です。