はじめに
HTML の viewport メタタグって知っていますか？
<head> の中にある以下のようなタグです。
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover">
雑に説明すると、ブラウザがWebサイトを表示する時に、表示する領域のサイズを調整する時にこの値を参考にして計算されます。詳細はこちら:
とある Web サイトの viewport の値を見直していた際、MDNに載っていない shrink-to-fit=no という値があり、検索しても古い情報が多く判断しづらかったのですが、Gemini の Deep Research に調査してもらったり自分んで調べたりした結果、この値についての理解が深まりました。
この記事は、そうして得た shrink-to-fit=no という値についての令和最新版まとめです。
viewport の歴史
viewport の歴史の中から、shrink-to-fit=no が使われていた理由を説明するために必要な部分を抜粋して紹介します。
iOS の登場から viewport メタタグが生まれるまで
2007年に iPhone が登場する前は、Webサイトは横幅が 800px, 1024px, 1280px などを想定して設計されていました。初代 iPhone の横幅は 320px 1 で、デスクトップ向けに作られたWebサイトをそのまま表示しようとするとレイアウトが崩れてしまう、という課題がありました。
それに対し、iOS に搭載されているブラウザである Safari は、横幅が 980px でレンダリングしたものを縮小して 320px に収め、ピンチインなどで拡大できるようにしました。
この 横幅 980px の仮想キャンパスは「レイアウトビューポート(Layout Viewport)」、そして実際の横幅320pxの画面に表示されている部分を「視覚的ビューポート(Visual Viewport)」と呼ばれるようになりました。詳細はこちら:
しかし、この最初に縮小した状態で表示するアプローチは、場合によっては文字がとても小さく操作しずらい、という問題もありました。そこで登場したのが viewport メタタグです。 この機能はSafari 独自の拡張として追加されました。当時の Safari のドキュメントはこちら:
width=device-width や initial-scale=1 などを設定することで、ページをレイアウトビューポートと視覚的ビューポートの横幅が一致した状態でレンダリングようになりました。
| viewport 指定なし | viewport 指定あり |
|---|---|
 |
 |
（画像は先ほどの Safari のドキュメントから引用）
iOS 9 による混乱と shrink-to-fit=no の爆誕
2015年9月、iOS 9 がリリースされました。
このバージョンで追加された機能に、「Slide Over」「Split View」という機能がありました。これらは主に iPad の新機能で、以下のように1つの画面内で複数のページを表示できるようになりました。
| Slide Over | Split View |
|---|---|
 |
 |
（画像はこちらから引用）
これらの機能はビューポート界隈に大いなる混乱をもたらしました。なぜなら、これまで Safari では常に全画面にページを固定して表示していたのですが、この機能によりユーザーが操作するたびに動的に横幅が変わるようになったからです。
さらに、 Safari のビューポート処理方針にも変更がありました。width=device-width を指定していてもそれを超えるサイズのコンテンツがある場合はページ全体を自動的に縮小するようになった のです。この「はみ出したコンテンツに合わせて縮小する」機能を Shrink to Fit（収まるように縮小する）と名付け、それを無効化する手段として shrink-to-fit=no を提供しました。
Safari 9.0 のリリースノートにはこのように記載があります。
Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
このドキュメントの文章をそのまま受け取るなら、このときは「Slide Over」「Split View」関係なく、はみ出した部分を自動で縮小していた、ということになります。
これにより、「shrink-to-fit=no は必須の値」という認識が開発者の間で広まったのです。
また半年後の2016年3月に iOS 9.3 （Safari 9.1）がリリースされました。その時のリリースノートでは shrink-to-fit=no の説明文が少し変わっていました。
When Safari is in split-screen mode, viewport meta tags with the "width=device-width" attribute cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag, as shown below. The added value will prevent the page from scaling to fit the viewport. When Safari is not in split-screen mode, the content will not scale down.
When Safari is in split-screen mode とあるように、「Slide Over」「Split View」などの機能使用時のみ、自動で縮小されるようになったっぽいです。
このことから、基本的に iOS 9.3 以降では shrink-to-fit=no を付けなくても通常は Safari では意図しない縮小が起きないようになったとの見解が多いです。例えば、こちらの記事では検証結果から不要との意見が書かれています。
このように、 shrink-to-fit=no は実際には iOS 9.0 ~ 9.2 でのみ必要な値でしたが、その混乱していた間に投稿された記事や Stack Overflow, Reddit などが検索結果の上位に残り続け、 viewport の定番の値として残ってしまったようです。
現在、そして未来へ
ここまでの情報だと shrink-to-fit=no 不要説が優勢ですが、実際どうなのでしょうか？
手元の iPad (iPadOS 26.2, Safari 605.1.15) で試してみようと思います。先ほどの検証記事に shrink-to-fit=no ありなしのみ異なるページが用意されていたので、それをお借りしました。
↓ shrink-to-fit=no なしのページ
https://www.scottohara.me/testing/shrink.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
↓ shrink-to-fit=no ありのページ
https://www.scottohara.me/testing/shrink-no.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
普通に縦画面で開いてみましょう。
Chrome の場合
もちろん変化はないです。
shrink-to-fit=no なし |
shrink-to-fit=no あり |
|---|---|
 |
 |
Safari の場合
あれ？ shrink-to-fit=no なしだと縮んでますね 
shrink-to-fit=no なし |
shrink-to-fit=no あり |
|---|---|
 |
 |
iPad の画面分割も試す
画面分割で、左に Chrome、 右に Safari でそれぞれのページを開いてみます。
shrink-to-fit=no なしのページ
Safari のみ縮んでいます
shrink-to-fit=no ありのページ
縮まなくなりました
結論
【悲報】shrink-to-fit=no はまだ必要っぽい
ただし、この差が現れるのは、上記にも書いた通り width=device-width を指定していて、その幅を超えるコンテンツがある場合です。（検証に使用したページも 1600px 固定の要素があったから、縮小が起きました。）
ですので、CSSで適切にレスポンシブ対応ができていれば多くの場合は検証記事に記載の通り不要なのではないかと思います。そのため近年使用されているテンプレートの多くはこの shrink-to-fit=no が存在しないのではないでしょうか。実際 Next.js の viewport メタタグを指定するための型には shrink-to-fit は存在しません。
ですので、現在稼働中の Web サイトから外すときは実際に iPad などで動作確認を行ったうえで、不要そうだったら消すとよいのではないでしょうか？
おわりに
この記事を書いたきっかけは、 Gemini の Deep Research で shrink-to-fit=no について調べたときに、「不要ですよ～」という調査結果が出たので、不要ならそれを広めよう！と思ったからです。まだ AI の出力は疑うべき段階だと思うので、実際に iPad で試してみたら差が出て結論が逆転してしまいましたが、それはそれで有用な事実だと思ったので実機検証の結果も踏まえてまとめました。
今は（というか検証に使用した iPad の Safari のバージョンでは）まだ shrink-to-fit=no で差が出ていますが、これから仕様が変わったりするかもしれません。この挙動は Safari のレンダリングエンジンである WebKit にバグとしても報告されています。(https://bugs.webkit.org/show_bug.cgi?id=271819) ですので、今後も shrink-to-fit=no を付けるかどうか迷ったときは、やはり実機で動作確認してみる必要がありそうです。