javascript - JQuery Mobile で折りたたみ可能なセットの機能をレスポンシブにする

Question

デスクトップ、タブレット、電話で動作するアプリを設計しています。

デスクトップブラウザとiPadの横向きにはめ込みたいが、タブレットの縦向きや電話にはめ込みたくない折りたたみ可能なコンテンツがいくつかあります。

他のレスポンシブ要素は正しく機能していますが、次の html と CSS が機能していません:

HTML

<div id="storagePage" data-role="page" data-theme="a">
   <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" class="storage_devices" data-inset="true">
       <h2>Header 1</h2>
       <p>Content here</p>
   </div>
</div>

CSS

@media all{
.storage_devices {data-inset: "true";}
}

@media (max-device-width: 520px) and (orientation:portrait) {
    .storage_devices {data-inset: "false";}
}

JQuery Mobile ライブラリが html をマークアップしているため、クラスが div を正しく識別していないと思います。ID も試してみましたが、うまくいきませんでした。

ありがとう