画面幅に応じてviewportを変更する
スマートフォンとタブレットで画面幅に応じてviewport指定を切り替えるためのJSです。
前提条件
- スマートフォンとPCの2パターンでデザインが用意されている
- PCはコンテンツ領域が固定されており、コンテンツ領域よりウィンドウが狭い場合は横スクロール表示する
- タブレットはPCの表示をそのまま表示するが、タブレットでのウィンドウ幅がPCデザインのコンテンツ領域より狭くなった時にはスクロールバーを表示せず、PCデザインのコンテンツ幅＝画面幅として縮小して表示する
viewportを指定すれば良いわけですが、スマートフォンも巻き添えで縮小表示になってしまっては困るので、スマートフォンかタブレットでviewportを変えたいということがあります。
きちんとユーザエージェントを取得して出し分けした方が良いとは思いますが、とりあえず画面幅でviewportを出し分ける時のJavaScriptはこんな感じです。
ソースコード
460px以下でスマートフォン表示、PCでのコンテンツ領域の幅1280pxの場合です。
プレーンなJS
<script>
function viewportSet() {
var wsw = window.screen.width;
if (wsw <= 460) {
// デバイス横幅460以下
document.querySelector("meta[name='viewport']").setAttribute("content", "width=device-width,initial-scale=1.0,viewport-fit=cover");
} else {
// それ以外
document.querySelector("meta[name='viewport']").setAttribute("content", "width=1280");
}
}
window.addEventListener("DOMContentLoaded", viewportSet, false);
window.addEventListener("resize", viewportSet, false);
window.addEventListener("orientationchange", viewportSet, false);
</script>
jQueryを使用した場合
<script>
function viewportSet() {
var wsw = window.screen.width;
if (wsw <= 460) {
// デバイス横幅460px以下
$("meta[name='viewport']").attr("content", "width=device-width,initial-scale=1.0,viewport-fit=cover");
} else {
// それ以外
$("meta[name='viewport']").attr("content", "width=1280");
}
}
viewportSet(); // 必要な場合は $(document).ready()使う
$(window).on("resize orientationchange", viewportSet);
</script>
参考
metaのviewportの値を動的に変更するJavaScript
画面の横幅に応じてmeta viewportの値を動的に変更するjs（要jquery）
別の方法
prependやappendでmetaタグごとhead内に挿入、resize・orientationchange時にはremoveで削除してから挿入し直すのもありです。
タブレットでPC版の縮小表示をするようにviewportを切り替える方法
Remove and append viewport using jQuery