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

Answer 1

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>