如何實現移動端頁面默認橫屏顯示

思路分析

1. 使用 postcss-pxtorem 自動將 px 轉為 rem;
2. 結合當前瀏覽器窗口寬高及 orientation 來判斷當前設備橫豎屏狀態；
3. 根據當前橫豎屏狀態采用不同處理邏輯；
   

創建項目

vue init webpack vue-horizontal-demo

具體步驟

1. 安裝命令

npm i postcss-pxtorem --save-dev

2. 打開 build/vue-loader.conf.js 加入 px2rem 配置

"use strict";
const utils = require("./utils");
const config = require("../config");
const px2rem = require("postcss-pxtorem");
const isProduction = process.env.NODE_ENV === "production";
const sourceMapEnabled = isProduction
    ? config.build.productionSourceMap
    : config.dev.cssSourceMap;

module.exports = {
    loaders: utils.cssLoaders({
        sourceMap: sourceMapEnabled,
        extract: isProduction
    }),
    cssSourceMap: sourceMapEnabled,
    cacheBusting: config.dev.cacheBusting,
    transformToRequire: {
        video: ["src", "poster"],
        source: "src",
        img: "src",
        image: "xlink:href"
    },
    postcss: function() {
        return [
            px2rem({
                rootValue: 75,
                propList: ["*", "!border"],
                minPixelValue: 1
            })
        ];
    }
};

3. 在 index.html 中加入計算 font-size 代碼

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

    window.calcFontSize();
</script>

4. 增加 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)`;
            el.style.transformOrigin = width / 2 + 'px center';
            el.style.width = height + 'px';
            el.style.height = width + 'px';
        };

        // 設備關閉豎屏鎖定，橫屏時，還原成正常模式
        let reset = () => {
            let [width, height] = getDocumentSize();
            el.style.transform = `rotate(0deg)`;
            el.style.width = `${width}px`;
            el.style.height = `${height}px`;
        };

        el.resize = function() {
            if (document.activeElement.nodeName === "INPUT") return; // 兼容安卓

            window.calcFontSize();

            if ([null, 180, 0].includes(window.orientation)) {
                vertical();
            } else if ([90, -90].includes(window.orientation)) {
                reset();
            }
        };

        el.resize();

        el.click = e => {
            if (e.target.nodeName === "INPUT") {
                reset();
            } else if (![90, -90].includes(window.orientation)) {
                vertical();
            }
        };

        window.addEventListener("click", el.click, false);
        window.addEventListener("resize", el.resize, false); // 兼容安卓
        window.addEventListener("orientationchange", el.resize, false);
    },
    unbind(el, binding, vnode) {
        window.removeEventListener("click", el.click, false);
        window.removeEventListener("resize", el.resize, false);
        window.removeEventListener("orientationchange", el.resize, false);
    }
});

5. 在頁面最外層的容器加上 'v-horizontal-screen' 即可