タブレットでPC版の縮小表示をするようにviewportを切り替える方法

2021年12月28日

レスポンシブ対応でサイトを作っているとき、タブレットはPCの縮小版で表示したいケースがあると思います。

そんなときは、viewportをうまく端末ごとに切り替えることで対応が可能です。

この記事ではタブレットでPCの縮小表示をしつつ、スマホ版ではCSS内で記述したメディアクエリ（@mediaの部分）を採用するように設定する方法をまとめました。

タブレットでPC版の縮小表示をするコード

jQueryを使って、以下のようにviewportの宣言を切り替えることで対応ができます。

let ua = navigator.userAgent.toLowerCase();
let isMobile = /iphone/.test(ua) || /android(.+)?mobile/.test(ua);

if (isMobile) {
  $('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1">');
} else {
  $('head').prepend('<meta name="viewport" content="width=1280">');
}

詳しく解説していきますね。

タブレットでPC版の縮小表示をする方法の詳しい解説

レスポンシブ対応をするときに、必ず設定しているviewport。

要はこれを端末ごとに切り替えることにより、表示方法を調整する必要があります。

スマホ：
画面幅に応じたコンテンツを出力

PC・タブレット：
画面幅を1280pxに設定してコンテンツを出力

としておけば間違いがありません。

スマホの場合に記述したいviewportは以下。

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

PC・タブレットのときに記述したいviewportは以下。

<meta name="viewport" content="width=1280">

閲覧者が用いている端末をユーザーエージェント（UA）から判断しつつ、jQueryを使ってうまく切り替えれば完了、ということになります。

Web担当者Forum

ユーザーエージェントとは意味/解説/説明【User Agent, UA】 | Web担当者Forum

jQueryのコードの詳しい解説

jQueryのコードを詳しく見ていきます。

let ua = navigator.userAgent.toLowerCase();

ユーザーエージェント（UA）をnavigator.userAgentから取得しつつ、toLowerCase()ですべて小文字にして扱いやすいようにします。

取得したuaは以下のようになっているはずです。

UAをjQueryで出力

let isMobile = /iphone/.test(ua) || /android(.+)?mobile/.test(ua);

取得したUAにスマホを意味する「iphone」や「android◯◯◯◯mobile」が含まれているかをチェックします。

if (isMobile) {
  $('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1">');
} else {
  $('head').prepend('<meta name="viewport" content="width=1280">');
}

あとは条件に応じてheadタグに必要なviewportを挿入して完了です。