Media Queries
Media queries are integral to designing your Command.App. They are added to your scene stylesheets and application stylesheets to give you full control over the look and feel of your app.
Media queries use the @media rule to include a block of CSS properties only if a certain condition is true.
Media queries use the @media rule to include a block of CSS properties only if a certain condition is true.
Copy the media queries below and paste into your scene or applications stylesheets.
Tablets – Landscape
iPads and standard Android tablets
includes iPad air 2 and newer
includes iPad air 2 and newer
/* iPads & Standard Android Tablets */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1){
}
Windows Surface Pro 3 & above
/*Windows Surface and Windows Laptops */
@media screen
and (min-device-width: 1201px)
and (max-device-width: 2800px)
and (orientation: landscape) {
}Tablets – Portrait
iPads and standard Android tablets
includes iPad air 2 and newer
includes iPad air 2 and newer
/* iPads & Standard Android Tablets */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1){
}
Windows Surface Pro 3 & above
/*Windows Surface and Windows Laptops */
@media screen
and (min-device-width: 1201px)
and (max-device-width: 2800px)
and (orientation: portrait) {
}
Phones / Mobile
Phones - PORTRAIT
/* Phones in portrait */
@media (max-device-width: 667px)
and (orientation: portrait){
}
Phones - LANDSCAPE
/* Phones in landscape */
@media (max-device-width: 667px)
and (orientation: landscape){
}