javascript - 实现方向锁定

Question

要求:我们要防止设备旋转(只支持纵向模式，不支持横向)

我的实现: 我在 orientationChange 事件上编写了一个函数，它将检测模式(纵向或横向)，如果是纵向模式，什么也不做，如果是横向模式，我正在使用变换旋转将其旋转回纵向 View 。

我的实现有问题:假设纵向模式是 360 像素，横向模式是 640 像素，我的媒体查询就像

@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 旋转 body ，所以它与纵向模式不同(字体大小在纵向模式下应该是 18px 但现在是 22px)。

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

有什么更好的方法来做到这一点....????

Answer 1

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

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

也许这更符合您的需求，但浏览器支持很差，所以可能不是适合您的解决方案

js Orientation lock