iphone - 媒体查询不适用于移动应用程序的 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" />