Responsive Layouts with Media Queries
To create responsive designs with jQuery Mobile it is recommended to leverage the power of CSS3 Media Queries.5 For example, if you need to enhance your layout for a particular device orientation you can detect the orientation of the device with media queries and apply your CSS modifications as necessary:
@media (orientation: portrait) {
/* Apply portrait orientation enhancements here... */
}
@media (orientation: landscape) {
/* apply landscape orientation enhancements here... */
}
In certain situations, jQuery Mobile will create responsive designs for you. The following figures show how well jQuery Mobile's responsive design behaves with form field positioning in portrait versus landscape mode. For ...
Get Pro jQuery Mobile now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
