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

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

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

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


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

* {
    min-height: 0vw;
}

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

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

よく読まれている記事

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

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

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

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

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

ディセントラライズド(decentralized)とは

メタバースとは

WEB3.0とは

LaravelとScribeで効率的にAPI仕様書を生成する

DXやメタバースなどバズワードについて思うこと

関連記事

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

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

FlexboxとCSS Gridの違いについて調べてみた