vue移动端强制横屏展示

一、在 index.html 中加入计算 font-size 代码

window.calcFontSize = () => {
        document.documentElement.style.fontSize =
            Math.min(
                document.documentElement.clientWidth,
                document.documentElement.clientHeight
            ) /
                25 +
            "px";
    };

    window.calcFontSize();

二、在main.js中增加?horizontal-screen 全局指令

Vue.directive("horizontal-screen", {
    bind(el, binding, vnode) {
        let self = vnode.context;

        let getDocumentSize = () => [
            document.documentElement.clientWidth,
            document.documentElement.clientHeight
        ];

        // 设备开启竖屏锁定，强制横屏模式
        let vertical = () => {
            let [width, height] = getDocumentSize();
            el.style.transform = `rotate(90deg)`;