web-dev-qa-db-ja.com

ビューポートの縮小表示メタ属性は何をするのですか？

これに関する文書を見つけるのに問題があります。それはSafari特有のものですか？

IOS 9（ here ）に最近のバグがありました。これに対する解決策はshrink-to-fit=noをビューポートメタに追加することです。

このコードは何をするのですか？

htmlsafariwebkitios9viewport
112
755

これは、少なくとも執筆時点ではSafari特有のもので、Safari 9.0で導入されています。 「Safariの新機能」から Safari 9.0のドキュメント ：

ビューポートの変更

"width=device-width"を使用するビューポートメタタグは、ビューポートの境界を超えたコンテンツに合わせてページを縮小します。以下に示すように、メタタグに"shrink-to-fit=no"を追加することでこの動作をオーバーライドできます。追加された値はページがビューポートに合うように拡大縮小するのを防ぎます。

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

つまり、これをビューポートメタタグに追加すると、Safari 9.0より前の動作に戻ります。

例

これは、2つの設定でページをロードしたときの違いを示す、実用的な視覚的な例です。

赤いセクションはビューポートの幅で、青いセクションは最初のビューポートの外側に配置されています（例：left: 100vw）。最初の例では、shrink-to-fit=noが省略され（したがってビューポート外のコンテンツが表示されている）、青いコンテンツが画面外に表示されたままになっている場合に、ページがどのように拡大されますか。

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

シュリンクフィット指定なし

Without shrink-to-fit=no

シュリンクフィット= noの場合

With shrink-to-fit=no

155
davidjb

IOSの使用に関する統計として、iOS 9.0-9.2.xの使用は現在0.17％であることを示しています。これらの数字がこれらのバージョンのグローバルな使用を本当に示しているのであれば、ビューポートのメタタグから適切に縮小されたタグを削除した方が安全な可能性が高いです。

9.2.x以降IOSブラウザのこのタグチェックを削除します。

あなたはこのページをチェックすることができます https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

3
GGGin