6

HTML ページがあり、レスポンシブ レイアウトに Twitter ブートストラップを使用しており、コメントにも Disqus を使用しています。携帯電話 (iPhone 5) から最初にページを読み込むと、すべてが正常に読み込まれ、Disqus はそのコンテナー (基本的には画面の全幅) でサイズ変更されます。電話を横向きにして元に戻すと、レスポンシブ デザインに問題はありません。サイズが変更され、思いどおりに動作します。問題は、Disqus iframe が最初のページの読み込み後に携帯電話でサイズ変更されないことです。

Disqus のサイズを自分で変更するのに役立つ良い方法があるかどうか疑問に思っています。

4

2 に答える 2

3

このDisqusヘルプページ（受け入れられた回答にもリンクされています）：

ホーム›開発者› AJAX サイトで Disqus を使用する

...このメモがあります：

DISQUS.reset レシピの例については、Github の DISQUS API Recipes リポジトリを参照してください。

そのレポにアクセスして、次の質問をすることにしました。

disqus / DISQUS-API-Recipes /問題 #7: Disqus は向きの変更時にサイズ変更されますか?

これが私の質問です（他の人がクリックしてGitHubにアクセスする必要がないようにここに投稿します）：

問題：

Disqus 埋め込みのサイズが iPhone の向きの変更中に変更されないことに最近気付きました。

質問:

  1. これは予想される動作ですか？Disqus の埋め込みは、コンテナに合わせてスケーリングされると想定していました...向きの変更を除いて、これは正しいようです。
  2. Disqus 埋め込みが向きの変更時にコンテナーに合わせて水平方向に拡大/縮小しない場合、上記のスタックの回答は、向きの 変更時にコンテナーのサイズに合わせて Disqus 埋め込みを拡大縮小するための最良の方法ですか?

ここで役立つ API レシピはありますか?

答えは次のとおりです。

これは予想される動作です。iOS の Safari では方向の変更中に iframe を適切にサイズ変更できないため、実際にこれを行いました。

これは統合によって制御できるものではないため、閉じます。代替案の評価を続け、より良い解決策が見つかった場合は、必ず検討します。

可能な解決策：

  1. @kafran によって提案されたDISQUS.reset()手法(および @MichaelReneer によって提案されたイベント) を使用します。orientationchange

  2. Disqus の埋め込みは、iOS では向きが変わってもサイズが変更されないという事実を受け入れてください。

  3. メタ ビューポート タグの構文を試してみてください (以下を参照)。

私が現在使用している回避策には<meta name="viewport" ... >、これを変更することが含まれます（従来の/標準のセットアップ）：

<meta name="viewport" content="width=device-width, initial-scale=1">

...これに：

<meta name="viewport" content="width=device-width">

を使用するだけwidth=device-widthで、横方向の変更でページがズームされるため、Disqus 埋め込みをスケーリングする必要がなくなります。

iOSのドキュメントには次のように書かれています：

device-width: デバイスの幅 (ピクセル単位)。

上記以外に、ビューポートの構成に関する Apple のドキュメント ページから適切な引用を得ることができませんでした(認めますが、Apple のサイトの検索に多くの時間を費やしませんでした)。物事をかなりうまくアップします：

HTML5 ボイラープレート: メタ ビューポートと width=device-width

関連情報:

iOS 専用の Web アプリケーションを設計している場合、Web ページの推奨サイズは iOS の表示領域のサイズです。Apple では、幅を device-width に設定して、縦方向でスケールが 1.0 になり、ユーザーが横方向に変更したときにビューポートのサイズが変更されないようにすることをお勧めします。[すなわち。ビューポートは縦向きのデバイスの幅を保持しますが、横向きの幅に合わせてプレゼンテーション用に拡大または縮小されます]

このソリューションは、すべての人にとって望ましいとは限りません。私はたまたま、ズームがサイトの機能に追加されると思うプロジェクトに取り組んでいるので (以下の注を参照)、私は幸せなキャンパーです。

ノート ...

... iOS とinitial-scale=1:

<My2Cents>

ビューポートがinitial-scale=1定義されているとき、縦向き/横向き (iOS の場合) に移動するときにページが「ジャンプ」して自分の場所を失う方法に常に悩まされていました。

onlywidth=device-widthが定義されている場合、ページは縦向きから横向きの回転で「ジャンプ」せず、「より大きな」ズームイン ビューが表示されます。

使いやすさの点では、デバイスを回転させるときに自分の場所を維持することを好みます。デバイスを回転させる前に見ていた「縦向きモード」のコンテンツを見つけるためにスクロールする必要があります。

より大きなコンテンツが読みやすくなるという点で、ランドスケープモードでズームインすることについても言いたいことがあります.

最後に、電話を回転させてズームする方が、ピンチしてズームするよりも速く/簡単です! :)

</My2Cents>

于 2013-12-11T20:29:45.090 に答える