uniapp 在pc端环境下显示手机端页面

677 阅读1分钟

在域名的根路径下判断如果是pc端页面将内容进行嵌套

<template>
    <view style="width: 100%;height: 100%;" v-if="isPc">
        <web-view class="webview" :src="baseUrl"></web-view>
    </view>
    <view v-else>
       xxx
    </view>
</template>

<script>
    export default {
        data() {
            return {
                baseUrl: 'https://xxxx/h5/pages/index/index'
                isPc: false
            }
        },
        onShow() {
            let platform = uni.getSystemInfoSync().platform;
            this.isPc = (platform === 'windows' || platform === 'macos') && '/h5/' === window.location.pathname;
        }
    }
</script>

<style lang="scss">
    .webview {
        width: 375px;
        height: 667px;
        left: calc(50% - 187.5px);
    }
</style>