Question

在我的移动应用程序的iframe中加载网站时，我遇到了一个奇怪的问题。我有一个有七页的网站。当我在iphone的safari中浏览我的网站网址时。所有页面中的内容都呈现完美。但如果我在移动应用程序中的iframe中加载网站，安卓会在移动应用程序的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" />

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

1 个答案: