페이 스북 (Facebook) 내부에서 Media Query Fail

Question

페이스 북의 Canvas iFrame 응용 프로그램에서 내 @media 쿼리가 트리거되지 않는 이유를 알아 보려고합니다. 810 픽셀 넓은 페이지 탭에서 다음 미디어 쿼리가 트리거지고이는 경우가 왜

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

은 누군가가 나에게 설명 할 수 있습니까? html 및 본문의 너비는 810 픽셀입니다. 브라우저에서 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 옵션 만 있습니다.

감사합니다.

Answer 1

나는이 문제를 해결했다. 쿼리가 실행되는 뷰포트 확대/축소 또는 배율이 밝혀졌습니다. 내 브라우저에 기본 확대/축소 수준이 설정되지 않았으므로 810 픽셀 너비이지만 실제로는 확대/축소 때문에 729와 비슷합니다. 뷰포트 확대/축소가 기본값으로 설정되도록하려면 메타 태그를 사용하십시오.

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