css - 不要在横向 View 中旋转网页

Question

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

Answer 1

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

---

不过要回答你的问题:

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

类似下面的内容:

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