1. ホーム
  2. html

[解決済み] viewport meta属性のshrink-to-fitは何をするのですか?

2022-03-04 04:57:40

質問

これに関するドキュメントが見つからず困っています。Safari特有のものなのでしょうか?

最近、iOS9でバグがありました( こちら ) を追加することで解決します。 shrink-to-fit=no をビューポートメタに追加しました。

このコードはどうなっているのでしょうか?

どのように解決するのですか?

少なくとも本稿執筆時点では、Safari 9.0から導入されたSafari固有のものです。 What's new in Safari?".より。 Safari 9.0に関するドキュメント :

ビューポートの変更

ビューポートのメタタグに "width=device-width" は、ビューポートの境界をはみ出したコンテンツに合わせてページを縮小します。この動作を上書きするには "shrink-to-fit=no" をmetaタグに追加することで、以下のようになります。この値を追加すると、ビューポートに合わせてページが拡大縮小されるのを防ぐことができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

要するに、viewport meta タグにこれを追加すると、Safari 9.0 以前の動作が復元されるということです。

この2つの構成でページを読み込む際の違いを示す、動作するビジュアル例を示します。

赤い部分はビューポートの幅で、青い部分は最初のビューポートの外側に位置しています(例えば left: 100vw ). 最初の例では、ページが shrink-to-fit=no を省略した場合(つまり、view-of-portのコンテンツが表示される)、後者の例では青いコンテンツは画面外に表示されたままです。

この例のコードは、次の場所にあります。 https://codepen.io/davidjb/pen/ENGqpv .

shrink-to-fitを指定しない場合

shrink-to-fit=noの場合