36

レスポンシブ Web サイトを作成していますが、iPhone で表示すると、コンテンツ ページに奇妙な動作があることに気付きました。縦向きモードでロードした場合、および横向きに回転した場合も正しくスケーリングされます。ただし、縦向きに戻すと、ページが左にシフトするか、正しくズームされないように見え、右側に空白の帯ができます。この空白は、ユーザーがページを左にスワイプできるため、縦向きでの最初の読み込み時にも存在するようです

説明をこれ以上複雑にするのではなく、この動作が発生しているサンプル ページへのリンクを次に示します。iPhone で見てから、この問題のないホームページを見てください。

さらに何かを見る必要がある場合は、私だけが知っています:)

4

12 に答える 12

50

修正しました！問題は1つの特定のdivから発生していました。それを見つけるために、問題がなくなるまでさまざまな要素を削除するプロセスでした。

overflow-x: hiddenそれを修正するには、そのdivに追加する必要があり、それが整理されます。これが同様の問題を抱えている他の人に役立つことを願っています。

于 2011-11-29T02:17:19.600 に答える
45

私は同じ問題を抱えていたので、次のように設定して修正しました：

html, body { width:100%;  overflow:hidden; }
于 2013-02-27T14:23:41.137 に答える
10

この問題は、任意の分割の幅が iPad の画面の幅よりも大きい場合に発生します。

私の場合、一部の区画のサイズは 1000px だったので、そのままにしてみましたwidth:auto。 overflow-x:hiddenも同じことを行いますが、推奨される方法ではありません。

于 2012-04-24T13:26:56.860 に答える
4

「overflow-x：hidden」を使用すると問題の一部は解決しますが、スクロールをねじ込み、奇妙な動作をします（Jasonが言ったように）。

時々、最も難しい部分は、問題を引き起こしているものを発見することです。私の場合、数時間後、問題がTwitterのブートストラップにあることがわかった場合：

フォームに「control-group」ゾーンを備えたTwitterのBootstrapを使用している場合は、問題が発生している可能性があります。私の場合、私は次の問題を解決しました：

.control-group .controls {
     overflow-x: hidden
 }

これで、右側の空白がなくなりました:)

于 2013-02-17T04:14:53.447 に答える
4

これをテストするための iPhone は持っていませんが、過去に作成した Web サイトで似たようなものに遭遇しました。私の場合は、港から陸地に移動するときにスケールを台無しにするバグがサファリモバイルにあったためです。

次のコードで修正されました（現時点ではどこから入手したか思い出せません）

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
于 2011-11-22T15:09:27.283 に答える
0

このトピックが開かれてからしばらく経っていることはわかっていますが、同様の状況に遭遇し、次のプロパティright: -999999px; position: absolute;が画面外に隠されている要素が原因であることがわかりました。

上記を変更してleft: -999999px; position: absolute;、OP と同じ問題を解決しました (右に白い画面が表示され、右にスワイプする機能)。

于 2014-11-06T10:29:15.010 に答える
0

Bootstrap 3.3 を使用しています。これらの解決策をすべて試しましたが、何も機能しませんでした。次に、問題があったセクションで<div class="container">を<div class="container-fluid"に変更しました。>これで問題は解決しました。

于 2014-11-12T05:38:55.347 に答える
0

私にとってはうまくいったので、Navneet Kumarのソリューションに追加したいと思います。width=100% でスタイル設定された div タグには、左パディングまたは右パディングを含めることもできません。モバイル ブラウザー (iPhone および Android デバイスで問題が発生していることに気付きました) は、div の幅が 100% を超えると解釈するため、右側に余分なスペースが作成されます。(固定幅については知っていましたが、パーセンテージ幅については知りませんでした。) 代わりに、パディングと組み合わせて width=auto を使用してください。

于 2013-01-17T23:20:57.553 に答える
0

結果は状況によって異なるようですが、サイト全体で

html、本文{幅:100%; x オーバーフロー:非表示; }

私のために働いたようです！

于 2016-03-10T14:33:33.170 に答える