媒体查询不适用于移动应用程序的 iframe

Question

在我的移动应用程序的 iframe 中加载网站时遇到奇怪的问题。我有一个有七页的网站。当我在 iphone 的 safari 中浏览我的网站网址时。所有页面中的内容都呈现完美。但如果我在移动应用程序的 iframe 中加载 网站，android 会在移动应用程序的 iframe 中正确呈现网站。但是 在 iphone 中的三个页面内容溢出，我看不到完整的页面。下面列出了我的媒体查询。顺便说一句，我正在为我的网站使用引导框架。

    @media (min-width: 768px) and (max-width: 979px) {
      // css goes here
    }
    @media (min-width: 768px)
    {
     // css goes here        
    }
    @media (max-width: 767px) {
     // css  goes here              
    }
    @media (min-width: 1200px) {
        // css goes here              
    }
    @media (min-width: 768px) and (max-width: 979px) {
       // css goes here              
    }
    @media (max-width: 767px) {
       // css goes here 
    }
    @media (max-width: 480px) {
       // css goes here
    }
    @media (max-width: 320px)
    {
      // css goes here
    }
    @media (max-width: 240px)
    {
     // css goes here
    }
   @media (max-width: 979px) {
    // css goes here
    }
    @media (min-width: 980px) {
    // css goes here
    }

是否还有其他针对 iphone 移动应用程序内部 iframe 的媒体查询。我是这个响应式媒体查询的新手。请帮忙。由于我将在两天后赶上客户的最后期限，因此我必须解决这个问题。

提前致谢。

Answer 1

有时浏览器不会呈现媒体查询功能。尝试将此添加到您的头部。或许你会得到一些运气。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />