Facebook Iframe 内的媒体查询失败答案

【问题标题】：Media Query Fail inside Facebook IframeFacebook Iframe 内的媒体查询失败
【发布时间】：2012-06-21 18:45:59
【问题描述】：

我正在寻找为什么我的@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/...) 上运行良好，因为我将画布宽度设置为“流体”。页面标签似乎没有使用此设置，只有窄 520px 或宽 810px 选项。

感谢您的意见！

【问题讨论】：

标签： facebook iframe css media-queries facebook-iframe

【解决方案1】：

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

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

【讨论】：