media queries not applying inside the iframe of a mobile application

Question

I have strange issue when loading a site within iframe of my mobile application. I am having a website with seven pages. When I browse my website url in iphone's safari. The content in all the pages are rendering perfect. but if I load the website in a iframe inside my mobile application the android renders the website correctly inside iframe of mobile application. But in iphone three of the pages the content get overflowed and I can't see the full page. My media queries are listed below. By the way I am using bootstrap framework for my website.

    @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
    }

Is there any other media queries targeting the iframe inside mobile application of the iphone. I am new to this responsive mediaqueries. Please help. As I am meeting the client's deadline in two days I have to solve this issue.

Thanks in advance.

Answer 1

Sometimes browsers don't render the mediaqueries features. Try this adding into your head section. May be you get some luck.

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