2022年05月26日(木)

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

• 0
• 178
• 479
• 222

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。

今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。

author:

コリス

http://coliss.com

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ

オリジナルサイトで続きを読む

今日のwebデザイン記事ランキングを見る

         

‹ PREV

               

「熱量」を届けられるBtoBマーケ手法。イベント集客の魅力と成功の秘訣

         

NEXT ›

               

E2E暗号化でデータを保護するプライベートなオープンソースのメールアプリ・「Skiff Mail」

関連記事

• CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
• Amazonで、春のコンピュータ・IT書フェアが開催！ セール初登場もあり、Web制作関連のKindle本がかなりお買い得です
• CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
• CSSの2023年現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
• 11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

Ads

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる』についてまとめています。

この記事は特にjavascript・アニメーション・SEO・Chrome・twitter・safari・iOSについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。