環境
初書:2020/09/08
タイトルの付け方が適当な気がしてならないが、いいのが思いつかなかった
前提
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">
viewport
でdevice-width
を使用していて、cssで@media screen and (max-width: 600px)
のような感じでレスポンシブウェブデザインに対応させている場合
javascriptで動的変更する
…ことが出来る。しかも一行で
document.getElementsByName("viewport")[0].setAttribute('content','width=1080, initial-scale=1.0,minimum-scale=1.0');
document.getElementsByName("viewport")
で、metaタグを取得する事が可能なのでsetAttribute
でcontent
箇所を書き換える。
([0]
なのは、viewportという名前はおそらくこれしかないだろうという観点から。もし他の要素にviewportという名前を付ける場合は、単純に[0]にするとバグが生じるかもしれない)
注意点
viewportを書き換える形の場合、スマホの横幅に合わせてサイズが細かくなるわけではなく、
画面外に伸びてサイズが変更されるので(下の図の感じ)、cssでvw
を使ってサイズを指定している箇所はレイアウトが崩れる。
|---------------------------------------------| //width=1080に設定した時
|------------------| // スマホ画面(400くらい?左右にスクロールが出来るようになる)