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

レスポンシブ対応でサイトを作っているとき、タブレットは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を使ってうまく切り替えれば完了、ということになります。

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を挿入して完了です。

まとめ

タブレットにてPCの縮小表示をするためには、viewportの設定を状況に応じて変更してあげるのが確実です。

ユーザーエージェント(UA)をうまく使って設定していってくださいね。

この記事が気に入ったら
いいね または フォローしてね!

SHARE

コメント

コメントする

目次
閉じる