Home
〉
CSS
〉
clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法

どうも!かけちまるです!

clamp関数でfont-sizeを可変にした時にSafariだと可変にならないのです。
Can I useで見る限りだとサポートされているはずだけど…

この記事では、

  • ・Safariでclamp関数が効かない時の対処法

がわかります。

Safariでclamp関数が効かない時の対処法

Safariはclamp関数をサポートしているにも関わらずうまく計算してくれないようです。
そんな時は全体にmin-heightを0vwを指定すると解決できます。

そんな時は次のCSSを追加してみてください。

CSS
コピー
*{ min-height: 0vw; /* Safari clamp関数対策 */ }

なぜmin-heightを0vwにすると解決するのかは不明なのでわかる方がいればTwitterかお問い合わせフォームからご教授いただけると助かります。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【macOS】よく使うターミナルコマンド一覧

【macOS】よく使うターミナルコマンド一覧

画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする