I am looking to find out why my @media queries are triggering when they are not supposed to, inside a Facebook Canvas iFrame Application. On a 810px wide page tab, the following media query is getting triggered:
@media only screen and (max-width: 767px) {}
Can someone explain to me why this would be the case? html and body are showing 810px wide. It works properly when viewing the same page on its own in a browser, as the query triggers as soon as I scale the browser down to 767px...
FYI this is the iFrame code that Facebook is displaying on my page tab:
<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>
ALSO: The queries work just fine on the full app page (http://apps.facebook.com/...), as I have canvas width set to "fluid". The page tab doesn't seem to use this setting and only has a narrow 520px or wide 810px option.
Thanks for the input!
I have solved the problem. It turned out it was the viewport zoom or scale that was causing the queries to trigger. I did not have the default zoom level set on my browsers, so while it appeared to be 810px wide, it was actually something like 729, due to the zoom. To ensure users have their viewport zoom set to default, use the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">