Always Landscape CSS

landscape.txt

/*
** Only use in case of hardcode
** We use max-aspect-ratio and not orientation: portrait because when an input get focused, the mq its disabled
** The site content needs to be wrapped in main-wrapper and main-wrapper--content
** The JS is to fix the weird vh behaviour in Chrome Android
*/

/* CSS */
/* @media screen and (min-aspect-ratio: 13/9){ } // landscape */
/* @media screen and (max-aspect-ratio: 13/9){ } // portrait */
/* @media (orientation: portrait) { */
@media screen and (max-aspect-ratio: 13/9){ 
  .main-wrapper{
    height: 100vw;
    width: calc(var(--vh, 1vh) * 100);;
    transform-origin: 0% 0%;
    transform: rotate(90deg);
    position: fixed;
    left: 100%;
  }
  
  .main-wrapper--content{
    height: calc(100vw + 1px);
    overflow-x: hidden;
    width: calc(var(--vh, 1vh) * 100);;
  }
}
/* } */


/*JS*/
window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  });
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);