媒体查询未在移动应用程序的iframe内应用

Question

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

    @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" />