昨夜、自分のHPのちょっとしたミスに気が付きました。と、言うのはレスポンシブになっているページの幾つかのページで、何故か横スクロールバーが表示されていて、少しだけ表示されていない部分があったのです。このスクロールバーを動かして、右端まで表示させるとそこには訳の分からない余白が出来ていました。こうしたページをiphoneで開いて見てみると、縦スクロールと共に少しだけ横方向へもぐらぐらと動き横スクロールしてしまっていました。
レスポンシブになっているのなら、常に横全体が表示されているからスクロールバーは出て来ない筈です。気が付かなければそのままだったのでしょうが、分かった以上、すぐに直しておきたいものです。そこから深夜、ベッドの上でMacbook Air で悪戦苦闘。上手く行っているページと駄目なページの違いを見つけようと、cssやhtml を調べても何とも分かりません。簡単に解決するだろうと思っていた事が意外に厄介です。ネットで調べてみるとどうやらiphoneやiPadなどのいわゆる iOSで起きる問題のようですが、自分の場合はMacのsafari でもchromeでも同じような症状が出ていたので、これらとは別の原因に思えます。
そんな中で見つけた記事に<body>タグ以降を全部含んだ<div>を作りこのdiv要素にwidth: 100%; とoverflow: hidden; を指定すれば良いとの事。
それまで試してみた事とはだいぶ違うので、これならもしや？と思いやってみたら、一発で解決。でも、この記事の著者もこれで治りはしたけど、原因が何なのかは分からないと言っていました。原因を想像するに、何かがはみ出していると考えられますが、それがどこなのかはただコードを見ただけでは分かりませんでした。
原因がどうであれ、これで解決できたのですから、今度からはcssの最初にまずこいつを、おまじないと思って書いておこうと思います。
でも、safariでのカラム落ちは未だに解決していません。こちらはもう諦め気分です。
0 件のコメント:
コメントを投稿