4

http://cardiffhosp.rapdevs.co.uk/は、レスポンシブデザインであるWooThemeCanvasを中心に構築されています。

レイアウトをレスポンシブにしたくないので、ビューポートメタタグを無効にする必要がありました。

モバイルデバイスでは見栄えが良くなりましたが、右側に白い領域が表示されています。ほとんどがiPhone/iPadで表示されますが、他のデバイスでズームアウトすると、空白が表示されます。

次のコードを追加すると、問題は解決しましたが、iPhoneでナビゲーションが機能しなくなり、Windows7電話で表示の問題が発生しました...

html, body {
   overflow-x:hidden;
}

空白を削除するためのより良い解決策を誰かが持っていますか？

4

1 に答える 1

1

追加width:100%してみて、オーバーフローが原因である IE の問題が解決するかどうかを確認できます。

html, body {
    overflow-x:hidden;
    width:100%;
   /* You may also want to try adding:*/
    margin: 0;
    padding: 0;
}

それでも問題が発生する場合は、問題の原因となっている要素を見つける必要があります。

これを行うにはいくつかの方法があります。(作業前に必ず取り外してくださいoverflow-x:hidden;。)

1) インスペクターを開き、他の要素を含む div または要素から始めます。それらの div を に設定しdisplay:noneます。余分な空白が消えたら、問題のある要素を見つけてその CSS を修正できます。

そのオプションでは時間がかかりすぎる場合、または実行するのが難しい場合は、別のオプションを試すことができます。

2)このサイトには、サイトのすべての要素の概要を示す CSS があります。これは、オーバーフローの原因を見つけるのに役立ちます。このサイトで使用されている CSS は次のとおりです。

* {
   background: #000 !important;
   color: #0f0 !important;
   outline: solid #f00 1px !important;
}

また、これにも役立つJavaScript ブックマークも提供しています。

于 2015-07-05T00:41:13.200 に答える