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

Question

当我将 phone 旋转到横向视图时，我仍然希望以纵向视图查看网页。只能使用 CSS?

强制执行此操作

Answer 1

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

不过要回答你的问题：

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

类似于以下内容：

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

Answer 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; 
}}

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

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

Don't rotate the web in landscape view

css

wordpress

landscape

sass

twitter-bootstrap