0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

viewportでレスポンシブしている時にPC版表示をする

Posted at

環境
初書:2020/09/08

タイトルの付け方が適当な気がしてならないが、いいのが思いつかなかった

前提

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">

viewportdevice-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タグを取得する事が可能なのでsetAttributecontent箇所を書き換える。
[0]なのは、viewportという名前はおそらくこれしかないだろうという観点から。もし他の要素にviewportという名前を付ける場合は、単純に[0]にするとバグが生じるかもしれない)

注意点

viewportを書き換える形の場合、スマホの横幅に合わせてサイズが細かくなるわけではなく、
画面外に伸びてサイズが変更されるので(下の図の感じ)、cssでvwを使ってサイズを指定している箇所はレイアウトが崩れる。

 |---------------------------------------------| //width=1080に設定した時
 |------------------| // スマホ画面(400くらい?左右にスクロールが出来るようになる)

参考

もう逃げない。HTMLのviewportをちゃんと理解する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?