2

Facebook Canvas iFrame アプリケーション内で、@media クエリが想定されていないときにトリガーされる理由を探しています。幅 810px のページ タブで、次のメディア クエリがトリガーされます。

@media only screen and (max-width: 767px) {}

なぜこれが当てはまるのか、誰かが私に説明できますか？html と body は 810px 幅で表示されています。ブラウザーを 767px に縮小するとすぐにクエリがトリガーされるため、ブラウザーで同じページを単独で表示すると正しく動作します...

参考までに、これは Facebook が私のページ タブに表示している iFrame コードです。

<iframe name="app_runner_fb_https4fe3673cce0ac5c25797649"
id="app_runner_fb_https4fe3673cce0ac5c25797649"
style="width: 810px; height: 941px;" frameborder="0"
src="https://s-static.ak.facebook.com/platform/page_proxy.php?v=5#app_runner_fb_https4fe3673cce0ac5c25797649">
</iframe>

また、キャンバスの幅を「流動的」に設定しているため、クエリは完全なアプリ ページ (http://apps.facebook.com/...) で問題なく動作します。ページ タブはこの設定を使用していないようで、狭い 520px または広い 810px オプションしかありません。

入力していただきありがとうございます！

4

1 に答える 1

3

私は問題を解決しました。クエリがトリガーされたのは、ビューポートのズームまたはスケールであることが判明しました。私のブラウザにはデフォルトのズーム レベルが設定されていなかったので、幅が 810px に見えましたが、実際にはズームのために 729 のようになりました。ユーザーのビューポート ズームがデフォルトに設定されていることを確認するには、メタ タグを使用します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2012-08-02T18:11:17.063 に答える