How can I show content in portrait mode in a browser window?

Question

Basically I want to tell browser that consider and display the current content in portrait mode. Is there way maybe using CSS, JavaScript, jQuery or any other library/ framework? This is specifically for desktop (displaying on TV specifically) and not mobile phones. I don't want to change orientation from device settings, but rather change orientation of the content / browser window as whole.

I tried rotating the whole body using CSS but the content width goes outside the viewport.

From what I researched and found was this: https://w3c.github.io/screen-orientation/ but I read that it will only work on FF browser on mobile

Can you explain what you mean by "show the content in portrait"? Do you want to limit the width of the body such that it is in portrait orientation, or do you only want to show the content when the orientation is portrait? — Wais Kamal
In addition to what Wais asked, is it your intent to have a fixed pixel ratio such as 16:9 (since you mentioned platform is a TV)? — Randy Casburn
Sorry for the confusion. What I want to do is rotate the content by 90 deg. The content is dynamically loading as per user interaction and content type would be Images, Videos, iFrames, image slider, text ticker, feeds, etc. Reference : ibb.co/S3B5W0F — RohilVisariya

Randy Casburn Randy Casburn · Accepted Answer · 2018-12-14T15:57:12

What you've described is called Responsive Design. In your use case there seems to be the need to display content a certain way given a specific layout. Since you mentioned specifically a TV, then the assumption here is a 16:9 aspect ratio viewing area.

To satisfy your use case, you can use a CSS capability called Media Queries by adding all of your TV viewport styles within this block:

@media screen  and (aspect-ratio: 16/9) {
     /* Styles to display content on TV go here */
 }

Use style rules within this block to ensure the content looks the way you want on your TV. You can test this in most browsers Dev Tools by forcing the browser to a 16:9 ratio screen size. When you do that, you'll be able to see the application of these styles.

Reference: Media Queries

EDIT:

Per comment clarification, I've provided a solution below for the specific issue at hand. I'm leaving the above comments in case someone comes here and finds that advice useful.

let container = document.getElementById('container');
document.querySelector('button').addEventListener('click', turn);

function turn() {
  container.classList.toggle('turn');
}

#container {
  width: 300px;
  height: 500px;
  border: 1px solid;
}

#container.turn {
  transform: rotate(270deg);
  margin-left: 150px;
}

#container img {
  display: block;
  margin: 15px auto;
}

#container p {
  padding: 15px;
}

button {
  display: block;
  width: 50%;
  margin: 0 auto;
}

<div id="container" class="turn">
  <img src="https://via.placeholder.com/150">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <button>Switch orientation</button>
</div>

How can I show content in portrait mode in a browser window?

1 Answers