实施方向锁定

Implementing Orientation lock

本文关键字：锁定 方向 施方向      更新时间：2023-09-26

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

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

我的实现问题：假设纵向模式为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，然后我的功能是使用变换旋转主体，所以它与纵向模式不同（纵向模式下的字体大小应该是18px，但现在是22px）。

基于方向，我不想再写css了。是否可以旋转窗口对象而不是正文标记？？

有什么更好的方法。。。。？？？？

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

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

也许这更像是你想要的，但浏览器支持非常差，所以可能不是你的解决方案

js方向锁定

相关文章：