6

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

問題

問題は、ページが最初はモバイルデバイス上にあるはずのようにレンダリングされていることですが、ページの読み込みが完了するとすぐに、ビューポートに合わせてページのサイズが変更されます。奇妙なことは何もありません。これはほとんどすべてのレスポンシブウェブサイトで発生します。しかし、奇妙なことに、使用可能な幅の75％しか使用されていません。

デザインのベース/スライスバージョンと製品バージョンをすでに比較しました。ベースバージョンは、正常にレンダリングされます（100％幅）。CSSの違いを見つけようとしましたが、いくつかしか見つかりませんでした。それらをリセットしようとしましたが、うまくいきませんでした。

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

最後になりましたが、Adobe Edge Inspectを起動して、モバイルデバイスのページソースを確認しました。しかし、残念ながら、「body」タグの幅を超える要素をページ上で見つけることはできません。幅を超えるのはヘッダー画像だけですが、画像はdiv（100％幅）内にありますoverflow:hidden

ベースおよび製品版

レンダリングを台無しにするものを誰かが見てくれるとしたら、それは素晴らしいことです。問題の原因がわからないようです。

ベース（動作中）：http://www.nambi.nl/lefunq/ プロダクション（モバイルで75％の幅でレンダリング）：http://www.lefunq.com/_index.php

この問題を調査するために時間を割いてくれたすべての人に感謝します。

4

2 に答える 2

4

あなたの問題は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>

より詳しい情報：

ログインが無効なためにフェイスパイルを読み込めなくなるとすぐに、ページのサイズが変更されます。Facebookにログインしてフェイスパイルが表示されるとすぐに、ページが本来のように引き伸ばされます。divフェイスパイルがない場合は0x0 /iframeなどであるため、奇妙なスケーリングの原因を突き止める必要があります。

ソリューション：

私はいくつかのことを試しました。OnloadまたはOnreadyイベント、およびフェイスパイルコードの非表示または削除。結局、これらのオプションはどちらも機能しませんでした。スケーリングは、フェイスパイルが完全にロードされる前に行われました。最終的な解決策は、javascriptの回避策であり、モバイルデバイスがあるかどうかを確認し、ある場合は、フェイスパイルコードを無効にします。

  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>');
  }

私はこの答えでブラウザがモバイルであるかどうかを検出する方法を見つけました：

jQueryでモバイルデバイスを検出するための最良の方法は何ですか？

于 2013-03-29T17:07:51.367 に答える
2

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

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

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

于 2013-03-29T12:57:39.600 に答える