23

私は適応可能なWebアプリケーションを持っています。水平スクロールを避けるために、次のCSSコードを記述しました。

html {
    overflow-x: hidden; }

これはデスクトップでは正常に機能しますが、モバイルでは機能しません。アプリをモバイルデバイスに表示すると、アプリは正常に適応します。問題は、右から左にスクロールするときです。ページが少し移動します。ページが横に動かないようにしたい。

編集：

ページはすべてのモバイルデバイスでスクロールするわけではありません。同じバージョンのAndroidを搭載した2つのデバイスで試しましたが、一方のデバイスでのみスクロールします。

4

10 に答える 10

46

すべてのパディングを確認します。幅が 100% に設定されているものにパディングを追加すると、親の外に出ます。

ここに示されています http://jsfiddle.net/wzZ3W/

コード

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

また、ページにまたがる要素の左右の負のマージンも確認してください。例http://jsfiddle.net/s7zrukj2/2/

また、CSS リセットを使用します。

使用しoverflow: hiddenたくない場合は、おそらく body 要素にも設定する必要があります。そのようです

body, html { overflow-x:hidden; }

何かがオーバーフローしているという事実は、レスポンシブ デザインにエラーがあることを示しています。代わりに、何かがモバイル ユーザーに表示されないように修正する必要があります。

于 2013-02-26T12:50:09.087 に答える
4

親コンテナーの幅がモバイル画面のサイズよりも広くないことを確認する必要があります

したがって、最善の策は、すべてに % widths を使用し、モバイル画面サイズよりも大きくなるコンテンツが固定されていないことを確認することです

于 2013-02-26T10:59:25.790 に答える
3

Boostrap を使用していて、この質問に出くわした場合は、ここに答えがあります。

ブートストラップ ユーザー向け

orでラップする.rowと、問題が解決します。.container.container-fluid

于 2020-07-01T11:21:15.150 に答える
1

問題をどのように解決したかを共有したかっただけです。オーバーフローx、すべての要素に赤い境界線を追加するなど、すべてを試しましたが、それでも右にスクロールできました。

まず、右スクロールができなくなるまで、「要素の検査」でコンテナを削除することから始めました。次に、問題となっている div にドリルダウンしました。「 visible: hidden」およびdisplay:block;にあった非表示のドロップダウンdivでした。. 「display:none」を入れることでそれを修正しましたが、今はすべて問題ありません。

于 2018-09-20T18:12:40.427 に答える