モバイルアプリケーションのiframe内にメディアクエリが適用されない

Question

モバイルアプリケーションのiframe内にサイトを読み込むときに奇妙な問題が発生します。私は7ページのウェブサイトを持っています。私はiPhoneのサファリで私のウェブサイトのURLを閲覧するとき。すべてのページのコンテンツが完璧にレンダリングされています。モバイルアプリケーションのiframeにのウェブサイトをロードすると、アンドロイドはモバイルアプリケーションのiframe内で正しくウェブサイトをレンダリングします。しかし、のiPhoneの3つのページでコンテンツがオーバーフローすると私は完全なページを見ることができません。私のメディアの質問は以下の通りです。ところで、私は自分のウェブサイトにブートストラップフレームワークを使用しています。

@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をターゲットにしたその他のメディアクエリはありますか。私はこの応答性の高いメディアクエリーには新しいです。助けてください。 2日間でクライアントの期限を迎えているので、私はこの問題を解決する必要があります。

ありがとうございます。

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