基本上我想告诉浏览器考虑并以纵向模式显示当前内容。有没有可能使用CSS、JavaScript、jQuery或任何其他库/框架?这是专门为桌面(特别是在电视上显示),而不是移动电话。我不想更改设备设置的方向,而是想整体更改内容/浏览器窗口的方向。
我尝试使用CSS旋转整个正文,但内容宽度超出了视区。
从我的研究和发现是这样的:https://w3c.github.io/screen-orientation/,但我读到它只能在手机上的FF浏览器上工作
发布于 2018-12-14 15:57:13
您所描述的就是响应式设计。在您的用例中,似乎需要在给定特定布局的情况下以特定方式显示内容。既然你特别提到了电视,那么这里的假设是16:9的宽高比观看区域。
为了满足您的使用情况,您可以通过在此块中添加所有TV视口样式来使用名为Media Queries的CSS功能:
@media screen and (aspect-ratio: 16/9) {
/* Styles to display content on TV go here */
}
在此区块中使用样式规则,以确保内容在电视上的外观符合您的要求。您可以在大多数浏览器开发工具中测试这一点,方法是将浏览器的屏幕大小设置为16:9。当您这样做时,您将能够看到这些样式的应用。
编辑:
根据评论澄清,我已经为手头的具体问题提供了下面的解决方案。我留下了上面的评论,以防有人来到这里,发现这个建议很有用。
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>
https://stackoverflow.com/questions/53782785
复制