Javascript 实现方向锁定

要求：我们希望防止设备旋转（仅支持纵向模式，不支持横向模式）

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

我的实现存在问题：假设纵向模式为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;
    }
} 

所以现在在横向模式下，字体大小是22px，然后我的函数是使用transform旋转主体，所以它与纵向模式不同（纵向模式下字体大小应该是18px，但现在是22px）

我不想基于方向再次编写css。 是否可以旋转窗口对象而不是主体标记

---

就我所知，有没有更好的方法来做到这一点……？

是不可能的。 希望以下代码能够帮助您：

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

也许这更符合您的需求，但浏览器支持非常差，因此可能不是您的解决方案

---

不，我有很多css代码，因此不可能基于方向编写css