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

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

これに関するドキュメントを見つけるのに苦労しています。これは Safari 固有のものですか?

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

このコードは何をするのでしょうか?

ベストアンサー1

これは 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

縮小指定なし

縮小フィットなし=いいえ

縮小してフィットさせる=いいえ

縮小してフィットさせる=いいえ

おすすめ記事