Making features of collapsible sets responsive in JQuery Mobile

问题

I am designing an app that works on the desktop, tablets and phones.

I have some collapsible content that I want to be inset in the desktop browser and ipad landscape, but not inset in tablet portrait and on phones.

I have other responsive elements working correctly, but the following html & CSS are not working:

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";}
}

I assume that the JQuery Mobile libraries are marking up the html and therefore the class is not identifying the div correctly. I have tried with id's as well with no luck.

Thanks

回答1:

I have used

@media all and (max-width: 650px) {
   .storage_devices {data-inset: "false"}
}

You can change the width, then add the orientation to fit your needs.

来源：https://stackoverflow.com/questions/14246703/making-features-of-collapsible-sets-responsive-in-jquery-mobile