from <meta>

Viewportに関する設定をする

設定の内容を書く

content の中身

viewporrtの幅を指定する

具体的なpx値

範囲は1~1000

e.g. 600

viewportの幅を、デバイスの画面幅に設定する

ページがデバイスの画面サイズに合わせてスケーリングされる

width の高さ版

具体的な数値やdevice-heightを指定できる

基本使わない

ユーザーがページを縮小できる最小のズームレベルを指定します。

例: minimum-scale=0.5 は、ページを50%まで縮小できることを意味します。

ユーザーがページを拡大できる最大のズームレベルを指定します。

例: maximum-scale=2.0 は、ページを200%まで拡大できることを意味します。

ユーザーがズームを行えるかどうかを指定します。

値としては、yes（ズーム可能）やno（ズーム不可）を指定できます。

noを試してみたけどchromeだと普通に拡大縮小できる

2016年あたりでこの指定自体が無効になっているらしい

「ズームできないのは体験悪い」というのは分かるけど、仕様をガッツリ無視した実装になっているのはいかがなものだろうか

長いけどわかりやすい、けど長い

このサイトのレイアウトが異常に読みづらいのでスクボ読書化して読んだ

まだ理解があやふや

Viewportとは、というところをもっと突き詰めないといけない

『［作って学ぶ］ブラウザのしくみ』とか読んだらわかったりしないかな？(適当)

ひとまずこんな感じの理解をした

これがどれぐらい正確な理解なのかは不明

まず、以下2つの関係性の話をしている

デバイスの幅

viewportの幅

ブラウザは、viewportがデバイスに収まるように表示する

だから、

デバイスの幅 < viewportの幅

である場合、デバイスに収めるために、viewportのscaleを小さくしてから収める

そこで、勝手に縮小されるのを避けるために、scaleに関する指定をする属性が用意されている

逆に、デバイスの幅 > viewportの幅

である場合は、同様の理屈で拡大して表示される

よく書くやつ