results
I am a desktop
I am a tablet
I am a phone
I am in portrait
I am in landscape
I am a phone in notch orientation
/** css to detect device size and orientation **/
/* detect phone in portrait */
@media screen and (any-pointer: coarse) and (orientation: portrait)
and (max-width: 400px) {
.results {background: lightGreen;}
.phone { display: block; }
}
/* detect phone in landscape */
@media screen and (any-pointer: coarse) and (orientation: landscape)
and (max-width: 900px) {
.results {background: lightBlue;}
.phone { display: block; }
}
/* detect tablet in portrait */
@media screen and (any-pointer: coarse) and (orientation: portrait) and
(min-width: 800px) and (max-width: 1024px) {
.tablet { display: block; }
}
/* detect tablet in landscape */
@media screen and (any-pointer: coarse) and (orientation: landscape) and
(min-width: 1024px) and (max-width: 1200px) {
.tablet { display: block; }
}
/* detect desktop in portrait */
@media screen and (any-pointer: fine) and (orientation: portrait) {
.desktop { display: block; }
}
/* detect desktop in landscape */
@media screen and (any-pointer: fine) and (orientation: landscape) {
.desktop { display: block; }
}
/* detect orientation is portrait */
@media screen and (orientation:portrait) {
.portrait { display: block; }
.landscape { display: none; }
}
/* detect orientation is landscape */
@media screen and (orientation:landscape) {
.portrait { display: none; }
.landscape { display: block; }
}
/* detect phone in landscape which might have a notch so set margins/padding */
@media screen and (any-pointer: coarse) and (orientation: landscape)
and (max-width: 900px) {
.phoneMightNotch { display: block; }
}
