今夜がλ

夜だけプログラマー

viewportのshrink-to-fitは誰が為に在る

スマートフォンからでもPC用表示でサイトが見られるようにするために、metaタグのviewportのcontentからwidthを固定して対応することにした。

 

viewportについてはレスポンシブに対応させるの記述しか使ったことなかったので改めて色々と調べてみたが、shrink-to-fitについて謎が深まるばかりであった。公式なドキュメントがほとんどなく今となってはとりあえずiOS用に記述しておけば幸せになれるという形で広く用いられている。とりあえず2012年まで遡って調べてみたがなぜかリーバイスの記事ばかりがヒットした。探しても見つからないはずである。shrink-to-fitとはデニム用語だったのだ。

 

デニムじゃない方のshrink-to-fitについて調査を続けたところ、AppleSafariに関する記事でshrink-to-fitに触れられていた。

どうやらiOS9.0ではviewportの挙動に変更があったらしく

"width=device-width"の記述によってレンダリングするための仮想ブラウザ幅を調整するのではなく、ブラウザ側で縮小することで仮想ブラウザ幅に見た目を合わせるという挙動になっているようだ(文章しか記述されていないので真にそういった挙動になっているかどうか分からない)。"shrink-to-fi=no"を追記することでその自動縮小が行われず、仮想ブラウザが幅が調整されるようになるようだ。元々shrink-to-fitはsafari対応のために生まれたプロパティのようだ(プロパティと呼べるのか謎だが)。

 

iOS9.1の記事も見てみると通常利用では改善されたようだが、split-screen modeでの挙動に問題があるため引き続き使うべきということが記述されていた。その後のiOS10, iOS11に関してはviewportの元気な姿を報告する文章は見られるがshrink-to-fitに関する記述は見られない。まるで初めからshrink-to-fitなんていなかったように。shrink-to-fitは名もなき銅像になったのかもしれない。