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.

Xerophilous

I have found what is blocking in that three pages. Initially it renders the content correct. We have a form in that pages. After enter the details in the form, the form details have shown in a table below the form. Initially there is no table. Now the table has shown in the page. After the display of table in that page the content get overflow. the structure of that is <div class="row-fluid"><div><table>//table elements</table></div>. This is happening inside the iframe of our mobile application. Our mobile application is using phonegap as well as jquery mobile. Please tell me how to solve – Xerophilous

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

Coddle

@Raghuvanshi I have tried this viewport meta tag previously. But nothing happens. As I said previously normally all the pages are displaying correctly. After the display of table only this problem occurs in that pages. Thanks. – Xerophilous

Note that this should be added to the head section of the parent page, not the page that is the target for the iframe. – Ance