iPhone(スマホ)で背景が途中で切れてしまうときの対処法

WPで作ったサイトをスマホで閲覧~

よくあるケースです。

で、この前作った自分のサイトを見てみたんですよ。暇だったので。(ぉ

そしたらですね、なんか背景が途中で切れちゃってるんですよ。

sPicture 1

タイトル下のナビゲーションの部分が途中で切れている。本当は、ちゃんと右端まであるんです。あるはずなんです。

背景が切れてるせいで、そこにあるリンクも見えなくなってしまってます。

タッチすればちゃんと飛びますが、これじゃ不親切すぎる。よく見たらタイトルも途中で切れている。

原因を調べてみると、どうやらwidth指定なしで背景を設定している場合にこの現象が起こるらしい。

ということは、ナビゲーション部分にwidthを設定しておいてやればいい、ってことですが、それよりもっと簡単に解決できる方法が。

bodyに、HP上で使われている最も大きな幅をmin-widthとして書き加えるだけOK。

例えば、HPで使われてる最も大きな幅指定が880pxだった場合は

body
{
        min-width:880px;
}

これを書き加えるだけ。超簡単!

結果、

sPicture 2

ちゃんとナビゲーションが右端まで見えるようになりました。ほっ。

シェアする