画面幅の変更に伴って、metaタグのviewport記述が変わるようにしたいです。

Question

画面サイズによってviewportの出しわけをしたいです。

ブラウザを縮小拡大しても1300px時の見た目を維持したく、jsを書きました。

768px以下の画面幅の場合は、「<meta name="viewport" content="width=device-width, initial-scale=1.0">」を指定し、それ以外は「<meta name="viewport" content="width=1300">」を指定したいです。

var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
if(screen.width < 768) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
} else {
    viewport.setAttribute('content', 'width=1300');
}
document.getElementsByTagName('head')[0].appendChild(viewport);

上記のコードを指定しています。

＜問題点＞

ブラウザの「検証」を使用し、画面幅を変更すると1300pxの見た目のまま、拡大縮小してくれるのですが、ブラウザの幅を直接変えても「<meta name="viewport" content="width=device-width, initial-scale=1.0">」を指定した際と同じ挙動になってしまいます。

お力をお借りできましたら幸いです。

よろしくお願いいたします。

Answer 1

viewportって、そういうものです。
ブラウザのデベロッパーツールで画面幅を変えると拡大縮小してくれるのは、ブラウザ上でそのサイズのスマホやタブレットのブラウザの画面をシミュレートしてくれてるからです。
PCブラウザは通常はviewportを無視する、と思ってもらって結構かと思います。
あくまでスマホやタブレットに対応させるためのもの、それがmetaのviewportです。

Comments

[hayata]

＞PCブラウザは通常はviewportを無視する、と思ってもらって結構かと思います。
そうだったのですね、、、
何気なくviewport使っていましたが、改めて勉強が必要みたいです。

原因がわかってスッキリしました、ありがとうございました！