ipad - ChromeiPadで機能しないメディアクエリのスタイリング

Question

だから私は私の体にクラスを追加するためにいくつかのJavaScriptを追加しました-

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(ipad)/);
if (agentID) {
    $("body").attr("id", "ipad");
    return;
}

3つのメディアクエリがあります。1つは標準のモバイル用で、もう1つは網膜用です。モバイルスタイルの一部はiPadのChromeで表示されているようです。メディアクエリは以下のとおりです。

@media only screen and (max-device-width: 480px) { 
}

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

}

そして私の3番目のメディアクエリ

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and     (orientation : portrait) {
/* Styles */
}

しかし、どちらのメディアクエリにも入力したすべてのスタイルは、iPadのChromeでは効果がなく、iPadのSafariでも完全に機能します。クラスを追加したJavaScriptでも機能していないようですが、追加しました

#ipad body {background-color:red!important;}

メディアクエリの外部のメインCSSに何もしません。

動作していないのはクロームだけです。キャッシュとブラウザのデータをクリアしましたが、まだ何もありません。

何か案は？