detect portrait landscape css
@media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … }
Source: stackoverflow.com
css device orientation
/* For portrait, we want the tool bar on top */ @media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* For landscape, we want the tool bar stick on the left */ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } }
Source: developer.mozilla.org
screen orientation css
@media screen and (min-width: 0px) and (max-width: 1204px) and (orientation: landscape) { html { transform: rotate(-90deg); transform-origin: left top; width: 100vh; overflow-x: hidden; position: absolute; top: 100%; left: 0; } }
mediaquery for portrate
@media (orientation: portrait) { body { flex-direction: column; } }
css orientations
@media (orientation: landscape) and (hover: none) and (pointer: coarse) { /* your CSS to target only landscape mobile users */ }
Source: stackoverflow.com