p5jsでウェブアプリを作っている。
これまではキャンバスのサイズを960x1280としていて、これで自分の使っているタブレットやスマホで大体画面いっぱいに表示できていたので良しとしていた。
キャンバスサイズを変えようとしたときに画面いっぱいに表示する方法がわからなかったので、調べてみた。

viewportについて

表示サイズの設定としては、HTMLのmetaタグでviewportの指定をするのが良いらしい。
一般的には以下のような指定をするのが良いという話であった。 

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

しかし、これでは画面いっぱいに表示されるようにはならなかった。

device-widthについて

device-widthは、出力機器の描画面の幅を示す値とのこと。
実際のディスプレイのピクセル数ではなく、PCの場合はウィンドウのサイズになるし、スマホやタブレットでは物理的な画面サイズを考慮した値となるようだ。
こちらのウェブページでdevice-widthがどのような値になるかを確認できた。

https://www.mydevice.io/

手持ちのスマホでは、6インチで画面幅が1080pxなのに対してdevice-widthは411pxとなった。
タブレットでは、8.3インチで画面幅が1200pxなのに対してdevice-widthが686px。
画面の物理的なサイズに合わされていることがわかる。

device-widthの値を使う意味は、表示される文字などのサイズが物理的に同じくらいになるようにしようということだろう。
今回の目的はそういうことではなく、画面の物理サイズに関係なくキャンバスが画面いっぱいに表示されることなので、device-widthの値は使わない方が良さそうだった。

ブラウザの表示倍率について

現在主に使用しているブラウザはPCでもスマホでもGoogle Chromeである。
ブラウザの設定からズーム倍率を変更して、表示サイズを変えることができる。
これとinitial-scaleで指定する値が関係あるのかと考えていたのだが、どうやら関係ないようである。この辺りがわかりにくかった。

initial-scaleで決まる表示倍率がまずあって、そこからさらにズーム設定の倍率がかけられる、という感じだった。
ブラウザのズーム倍率はサイトの表示後に任意で設定できて、サイトごとに設定が保持されるようである。
こちらの設定で画面いっぱいに表示できるように設定しておけば問題ないようだが、initial-scaleの方がどうなっているのかよくわからないのも気持ち悪い。

試してみたこと

widthやinitial-scaleを変えたときに各デバイスでどのように表示されるかを見るために、ウェブサイトを作ってみた。
https://muid7989.github.io/fps-setting-test/

試してみた結果として、

  • initial-scaleが指定されていると、widthに関係なくinitial-scaleの倍率で表示される
  • widthだけ指定されていると、widthで指定した幅で画面いっぱいに表示される

となるようであった。

結論

当面は、作成するキャンバスサイズに合わせてwidthを指定しておくことで、画面いっぱいに表示できることがわかった。
たとえば幅960pxでキャンバスを作成する場合、以下の文をHTMLのheadに追加しておくことにした。 

<meta name="viewport" content="width=960" />

画面の向きや物理的なサイズによってレイアウトを変える場合にはまた別途考える必要がある。

投稿タグ