web-dev-qa-db-ja.com

iPhoneのレスポンシブWebサイト-横長から縦長に回転する際の不要な空白

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

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

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

iphoneorientationwhitespacerotationresponsive-design
34
ellawson

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

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

49
ellawson

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

html, body { width:100%;  overflow:hidden; }
44
Eva Marie Rasmussen

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

私の場合、一部の部門のサイズは1000pxだったので、width:autoそしてそれは動作します。 overflow-x:hiddenも同じことをしますが、好ましい方法ではありません。

10
Navneet Kumar

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

時々、最も難しいのは、問題の原因を発見することです。私の場合、数時間後に、問題がTwitterのブートストラップにあることが判明した場合：

フォームの「コントロールグループ」ゾーンでTwitterのBootstrapを使用している場合、問題はそこにある可能性があります。私の場合、私は問題を解決しました：

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

今、右側の空白がなくなった:)

4
Miguel M. Almeida

これをテストする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);
    }
}
4
user1010892

Bootstrap 3.3を使用しています。これらのソリューションをすべて試しましたが、何も機能しませんでした。その後、<div class = "container" >から<div class = "container-fluid" >私が問題を抱えていたセクション。これで問題は解決しました。

0
Joe Rigney

このトピックが公開されてからしばらく経ちますが、似たような状況に出くわしたのは、次のプロパティright: -999999px; position: absolute;が画面から隠されている要素があったためです。

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

0
fidev

ここで提案されていることをすべて試しましたが、何も機能しません。次に、ページのスケールに関連していることを確認しました。そこで、<meta name="viewport" content="width=device-width, initial-scale=1.0">私のメインテーマのフォルダ内のheader.phpに、それは修正された問題です。

0
NikLanf

修繕！同様の問題がありました。幅を現在のデバイス幅に設定することで修正しました。

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;

}

0
Eimantas Šiaudinis

Navneet Kumarのソリューションに追加したいと思います。 width = 100％でスタイル設定されたdivタグには、左右のパディングを含めることはできません。モバイルブラウザ（iPhoneの問題に気付き、Androidデバイス）は、divの幅が100％より大きいと解釈し、右側に余分なスペースを作成しました（これについては知っていました。固定幅ですが、パーセント幅ではありません。）代わりに、パディングとともにwidth = autoを使用します。

0
JohnH

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

html、body {width：100％; x-overflow：hidden; }

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

0
leebotton