mui开发安卓端，输入法软键盘导致css横屏样式判断触发

css 横屏媒体查询

@media screen and (orientation:landscape) {}

一般情况下无问题，写了就不用纠结手机对比度问题，但是！竖屏模式下，如果打开软键盘，小屏幕手机会判断可见区域高度小于宽度，触发横屏样式，导致页面混乱。样式过多导致不能直接用js判断宽屏解决。

解决:

增加了一个自定义样式

.landscapeBox 写在了所有的媒体查询样式之中，然后在触发横屏时添加这个class，退出横屏取消class。如果用vue判断状态即可，如果没有，就代码搞起

//横屏
plus.screen.lockOrientation("landscape-primary");
//隐藏手机顶栏（真正的全屏）
plus.navigator.setFullscreen(true);
//给最外层添加自定义的class
document.getElementById("vueApp").classList.add("landscapeBox");



//ps:想竖屏用下面这个
//plus.screen.lockOrientation("portrait-primary");
//plus.navigator.setFullscreen(false);

//pss:想让mui识别plus，需要外层包裹
//mui.plusReady(function() {})

大致结构如图