2

我正在寻找为什么我的@media 查询在 Facebook Canvas iFrame 应用程序中不应该触发时触发。在 810 像素宽的页面选项卡上，将触发以下媒体查询：

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

有人可以向我解释为什么会这样吗？html 和 body 显示 810px 宽。在浏览器中单独查看同一页面时，它可以正常工作，因为一旦我将浏览器缩小到 767 像素，查询就会触发......

仅供参考，这是 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/...）上工作得很好，因为我将画布宽度设置为“流体”。页面选项卡似乎没有使用此设置，只有窄 520 像素或宽 810 像素选项。

感谢您的输入！

4

1 回答 1

3

我已经解决了这个问题。原来是视口缩放或比例导致查询触发。我没有在我的浏览器上设置默认缩放级别，所以虽然它看起来是 810px 宽，但实际上是 729，由于缩放。为确保用户将视口缩放设置为默认值，请使用元标记：

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