实施方向锁定

Question

要求：我们要阻止设备旋转（仅支持纵向模式，无景观）

我的实施：我在orientationChange事件上编写了一个函数，它将检测模式（纵向或横向），如果是纵向模式则不执行任何操作，如果是横向模式，我使用变换旋转将其旋转回纵向视图。

我的实施问题：让我们假设肖像模式为360px，横向模式为640px，我的媒体查询就像

@media all and (max-width:600px){
    Selector{
         Font-size:18px;
    }
} 

@media all and (min-width:601px) and (max-width:767px){
    Selector{
         Font-size:22px;
    }
} 

所以现在在横向模式下，font-size是22px然后我的功能是使用变换旋转身体，所以它与肖像模式不同（在纵向模式下字体大小应该是18px，但现在它是22px）。

我不想根据方向再次写css。 是否可以旋转窗口对象而不是body标签？

任何更好的方法来做到这一点.... ????

Answer 1

据我所知，这是不可能的。 希望以下代码可以帮助您：

@media (min-width:640px) and (orientation: landscape){
    Selector{
        Font-size: 18px;
    }
}

也许这更像你正在寻找的东西，但浏览器支持很差，所以也许不是你的解决方案

js Orientation lock