PCモニターの解像度が上がっている現在では幅広なデザインが主流なので、そもそもタブレットの画面幅に収めようとすると収まらないケースが増えています。
そういったデザインの場合、無理にレスポンシブで対応するよりもPCデザインを縮小して表示させたほうが綺麗に見える場合が多いです。
下記のコードをヘッダーに記載することでPCデザインの縮小版をタブレットの場合のみ表示させることが可能です！
<!– 通常のビューポート–>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!–タブレット検出とビューポート変更 –>
<script>
// タブレットを検出する関数
functionisTablet() {
// iPadを検出
constisIPad = /iPad/.test(navigator.userAgent);
// モダンなiPad検出
constisModernIPad =
navigator.maxTouchPoints > 1 &&
/Macintosh/.test(navigator.userAgent);
// Androidタブレットを検出
constisAndroidTablet =
/Android/.test(navigator.userAgent) &&
!/Mobile/.test(navigator.userAgent);
// 画面サイズによる検出
constisTabletSize =
window.innerWidth >= 600 &&
window.innerWidth <= 1024 &&
window.innerHeight >= 600;
returnisIPad || isModernIPad || isAndroidTablet || isTabletSize;
}
// ページ読み込み前に実行（DOMContentLoadedよりも早く）
(function() {
if (isTablet()) {
// タブレットの場合はビューポートメタタグを置き換える
document.write(‘<meta name=”viewport” content=”width=1300″>’);
}
})();
</script>
■□■□■□■□■□■□■□■□■□■□
営業時間：平日9：00〜18：00
●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL：092-726-5550 FAX：092-726-5558
●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内
⇒ メールでのお問合せ
⇒ ホームページ制作実績
⇒ 会社案内
■□■□■□■□■□■□■□■□■□■□
