Portrait Only View In React on Mobile Devices?

Question

Have a simple React App that I want to maintain in portrait-only on mobile devices. The normal meta tag to disable auto-rotate does not work.

I have seen answers here on Stack Overflow for React Native, but none for React.

Here is the relevant meta tag:

<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">

The screen still rotates on mobile devices. Why is this not working? It must be something simple, please help.

What am I not understanding?

I have a React App. I want it to stay in portrait view on mobile devices. I do not want the screen to rotate.

Am I using the meta tag wrong? This seems like it should very simple.

Answer 1

  html {
    /* Rotate the content container */
    transform: rotate(-90deg);
    transform-origin: left top;
    /* Set content width to viewport height */
    width: 100vh;
    /* Set content height to viewport width */
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }