ページローディング後にモバイルビューが小さくなる

Question

私が開発したサイトの1つに少し問題があります。問題は静かでシンプルですが、解決策は少し難しいようです。

問題

問題は、それが最初で、モバイルデバイス上にある必要がありますように、ページがレンダリングされていることですが、pageloadが終了した直後に、ページビューポートに合わせてサイズを変更します。奇妙なことではありませんが、これはほぼすべての応答しないウェブサイトで発生します。しかし、奇妙なことは、使用可能な幅の75％しか使用されていないことです。

私はすでにデザインのベース/スライス版を本番版と比較しました。ベースのバージョンは必要に応じてレンダリングします（幅100％）。私はCSSの違いを見つけようとしましたが、カップルしか見つけられませんでした。私はそれらをリセットしようとしましたが、うまくいかなかったのです。

また、私はJavaScriptを無効にしようとしました（ライトボックスと1つのJqueryUI "AddClass"エフェクトだけです）。 javascriptエフェクトには1つのタスクしかありません：pageloadの後、ヘッダは480pxから220pxの高さにリサイズされます。ページ上のどの要素の幅にも変更はありません。

最後に、私はAdobe Edge Inspectを開始し、モバイルデバイスのページソースを調べました。しかし、残念ながら、私は "ボディ"タグの幅を超えるページ上の要素を見つけることはできません。幅を超える一方のみが先頭画像であるが、誰も見てみるためにとても親切であろう場合、画像はoverflow:hidden

ベースと生産バージョン

とDIV（100％の幅）の範囲内でありますどのようなレンダリングが邪魔になるか、それはすばらしいでしょう。私はこの問題を引き起こしているものを見つけることができない。 （作業）

ベース：（モバイル75％の幅でレンダリング）http://www.nambi.nl/lefunq/ 制作：この問題を調査するのに時間がかかるすべての人にhttp://www.lefunq.com/_index.php

感謝。

Answer 1

あなたの問題はfacepileコードによって引き起こされた：

<div 
    class="fb-facepile" 
    data-href="http://www.facebook.com/pages/Le-Funq/113332665510819" 
    data-size="large" 
    data-max-rows="1" 
    data-width="450" 
></div> 

さらに詳しい情報：

とすぐfacepileが無効なログインにロードすることはできませんように、ページサイズ変更となります。私がFacebookにログインし、Facepileが表示されるとすぐに、そのページはそれに応じて伸ばされます。私は、面倒なスケーリングを引き起こしているものを見つけなければなりません。なぜなら、フェイルパイルがなければ、0x0 div/iframeなどです。

ソリューション：

私は物事のカップルを試してみました。 OnloadまたはOnreadyイベント、および、フェイル・コードを隠すか、または削除します。結局、これらのオプションのどちらも機能しませんでした。 Facepileが完全にロードされる前にスケーリングが行われました。

：

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false) { 
    document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>'); 
    } 

私はブラウザがこの答えでは携帯があるかどうかを検出する方法を発見した：最終的なソリューションは、モバイルデバイスがあるかどうので、その後、facepileコードを無効にした場合、チェック、JavaScriptの回避策ですWhat is the best way to detect a mobile device in jQuery?

Answer 2

Android 2.3.7ではネイティブブラウザ、Firefox、Dolphinを試しました。

両方のページが100％ズームでレンダリングされ、ページが完全に読み込まれた後にズームは変化しません。

この問題は、お使いのデバイスのソフトウェアに固有のものだと思います。