2017/10/02

safariのカラム落ち 解決!!

safari でもカラム落ちしていません
半年以上悩み続けてきたBootstrap のグリッドシステムでのカラム落ち、それもsafariだけに起こる現象のため訳が解らず既に半年以上、というかそろそろ1年経ってしまいます。
問題の起きるブラウザはsafariだけなので(iPhoneのsafariやchromeでも起きていましたが..)いささかもうどうでも良くなっていました。
それでも出来る事なら問題解決してスッキリしたいところです。
今までも、原因はこれだ!!思いつく度に何回も試して来ましたが、最終的にはどれもダメでした。再々再々再々再々度のトライでようやく何とかなったような....

まずは各カラムの幅指定を改めてcssの中でしてみました。bootstrap の既成のクラスの中で指定されていると思いますが、cssの中でこの幅指定を変えてみました。




.col-sm-4{
width: 33.2%;
}
.col-sm-3{
width: 24.9%;
}


早い話、全体で100%にはならないようにしただけの事。
bootstrap のcssの中で は4カラム使う場合は33.33333%となっているのだと思いますが、カラム落ちするという事はカラム幅がオーバーしている事なのだろうと、これを少しだけ減らしてみたのです。結果はバッチリ。safariでもカラム落ちは起きませんでした。どうやらsafari の中での画面幅の扱いがchrome や firefox とは少し違うようです。
これで万事解決と思い、これまで作ってきたページを全て修正して一件落着、と思いきや、iPhoneで見てみるとパソコンで見る画面そのままで1カラム表示に切り替わってくれていません。
ここでまたまた頭の悩みが増えました。

ええーー、どういう事なんだ? どうも訳の解らない動作をします。
そこで思いついたのがメディアクエリによる各ブレークポイントでの幅指定。
試しに768pxにブレークポイントを作り、それ以下での表示を100%にしてみました。
具体的なcssは以下のような簡単なものです。

@media (max-width:768px){
.col-sm-3, .col-sm-4 {
width: 100%;
}
}


ナント、これが大当たり!

慣れている専門の方には何でも無い常識的なことなのでしょうが、66歳の頭にbootstrap を理解させるのは結構厄介です。でもまぁ、解決出来たのですから、凄いーーく嬉しい!!!

0 件のコメント: