富山のシステム開発・Web制作会社

Safariでclamp()が効かない場合の対処法

前回、CSSの比較関数(min・max・clamp)についてご紹介しました。
主要ブラウザには対応していていても、clamp()は Safari で効かない場合があるようです。

比較関数に関する記事はこちら
【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話


設定前は、Safariのウィンドウ幅を狭めてもclamp関数で最大値に指定している値から変化がありませんでしたが、以下のコードを入れるだけで指定通り動くようになりました。

* {
    min-height: 0vw;
}

clamp関数を使う場合は合わせて設定しておくと良いかと思います。

この記事を書いた人
Front-end Engineer

よく読まれている記事

TensorFlow Lite Model Makerでカスタムモデルを作成する

LaravelとBackpackで構築した管理画面をカスタマイズする

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

LaravelとBackpackで管理画面を爆速で構築する

アクセス数バク上がり!MARBLEのアクセス数増加方法を大公開!

Flutter SDKのバージョンをプロジェクト別に指定する

メタバースとWEB3.0について

Laravel TelescopeとTelescope Toolbarで効率よくデバッグする

Safariでclamp()が効かない場合の対処法

【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話

関連記事

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話

CSS 子要素を親要素からはみ出して画面いっぱいに表示させる方法とWindowsブラウザの注意点