Bootstrapで構築したサイトを全てのブラウザで対応させる方法

Question

現在会社のHPリニューアルに向けて、WEBデザインの勉強をしています。開発環境はOS Windows10 エディタはAtom 使用しているCSSフレームワークはBootstrap v4.4.1です。
モバイルサイズでインデックスのページだけ制作し、ブラウザで確認してみたところ、Safariなどのブラウザではレイアウトが大きく崩れてしまっていました。
調べたところどうやらBootstrap4はSafariがサポートしきれていないようでした。

ウェブページを全てのブラウザに対応させるなら、４ではなくBootstrap３の方で作り直したほうがいいのでしょうか。
それとも、Bootstrap4のままでも対応させる方法があるのでしょうか。

考え方や、勉強になるサイトなどを、宜しければ教えて頂けると幸いです。

Answer 1

BootstrapにおけるSafari対応はv3系もv4系も、等しくWindows版は対象外（Windows以外のSafariは全て対応している）なのでバージョンを変えても解決しません。

Windows環境のSafariはAppleからの正式提供が終了しており、
ブラウザ使用ランキングにもWindowsのSafariを見ることはもはやありません。
WindowsのSafariに対応したいという目的であれば、それはする必要性が無い作業と言えます。

どうしても対応したい場合は、JavaScriptででOSを選別したうえでSafari用のCSSハックをひとつずつ適用していくことで対応することは可能だとは思います。

・Bootstrap 4.4.1 ブラウザ対応表
・Bootstrap 3.4.1 ブラウザ対応表

Comments

[Haruto513]

回答ありがとうございました。対応表を見るのは大切だと理解できました。
一応全てのブラウザに対応させることが要件にあるので、それに合わせた書き方を調べてみたいと思います。