Question

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

Answer 1

这可以极大地降低用户体验，因为视口现在只有高度的一半。在大多数情况下，简单地让景观视图更加用户友好更有意义（尽管它很少像肖像一样漂亮！）。

回答你的问题：

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

如下所示：

orientation

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

但正如另一个答案中所提到的那样......为景观视图制作更友好的用户界面也更好......

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

2 个答案: