縮小してビューポートのメタ属性は何をしますか?


143

これに関するドキュメントが見つかりません。Safari固有ですか?

iOS 9(ここ)に最近のバグがあり、その解決策shrink-to-fit=noはビューポートメタに追加されています。

このコードは何をしますか?

回答:


193

これは、少なくとも執筆時点でSafari 9.0で導入されたSafari固有のものです。「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にあります

焼き嵌め指定なし

シュリンクフィットなし=なし

縮小して合わせる=いいえ

縮小して合わせる=いいえ


2
申し訳ありませんが、それでもそのコードの機能がわかりません。別の方法で説明してもらえますか?ありがとう!
ダニエルスプリンガー、

3
@Daniデフォルトでは、Safariはページをズームアウトして、ビューポートからオーバーフローするコンテンツに合わせます(最初の例では、青い領域が表示されており、オーバーフローしています)。指定shrink-to-fit=noすると、この動作が防止され、ズームレベルがそのままになり、オーバーフローしたコンテンツが画面外に残ります。iDevice(またはiOSシミュレーター)でCodepenの例を試し、設定を変更してみてください。おそらく、変更をインタラクティブに確認することが役立つでしょう。
davidjb 2017年

2
ああ、なるほど。しかし、なぜ誰かが自分のコンテンツの一部を小さな画面で非表示にしたいのでしょうか?
ダニエルスプリンガー

7
@Daniさまざまな理由がありますが、簡単な例としては、ビューポートの外にコンテンツを配置するスライダー/カルーセル、またはそうでなければオーバーフローしてページの残りの部分がデフォルトで非常に小さくなる原因となる大きな非応答コンテンツ(例:画像/テーブル)があります。shrink-to-fit動作。を使用するshrink-to-fit=noと、ページは予想されるサイズのままになり、コンテンツがビューポートからオーバーフローします。ユーザーは(通常)スクロールまたはズームアウトしてオーバーフローコンテンツを表示できますが、初期ビューポートはデバイスサイズと一致します。
davidjb 2017年

2
@davidjbこれは最新のiOS 11で修正されたと思います。このバグを再現できません。
Zeel Shah

12

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.