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

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

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

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


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

* {
    min-height: 0vw;
}

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

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

よく読まれている記事

iOS16.4のWebプッシュ通知を試す

Laravel Sailで開発環境を構築する

【jQuery】アクセスごとに動画とポスター画像をランダム表示させる方法

iPhoneのSafariでデバッグする方法

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

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

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

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

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

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

関連記事

iPhoneのSafariでデバッグする方法

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

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