不要在横向视图中旋转网页答案

【问题标题】：Don't rotate the web in landscape view不要在横向视图中旋转网页
【发布时间】：2016-10-07 17:35:23
【问题描述】：

当我将手机旋转到横向视图时，我仍然希望以纵向视图查看网页。是否可以仅使用 CSS 强制执行此操作？

【问题讨论】：

石头你应该标记为正确或投票赞成你的问题的答案..
如果你能投票给我的答案你会很高兴..

标签： css wordpress twitter-bootstrap sass landscape

【解决方案1】：

这可能会极大地降低用户体验，因为视口现在只有一半高度。在大多数情况下，让横向视图更加用户友好会更有意义（尽管它很少会像纵向一样好！）。

不过，要回答你的问题：

使用媒体查询，您可以使用orientation 媒体属性并使容器宽度等于视口高度。

类似于以下内容：

@media (max-width: 768px) and (orientation: landscape) {
    #container-div {
        width: 100vh;
    }
}

【讨论】：

【解决方案2】：

它也很容易使用 css 重新旋转..

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) { 
body {
-webkit-transform: rotate(-90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0; 
}}

但正如另一个答案中提到的......最好为横向视图制作更用户友好的布局......

【讨论】：