【Vue】如何快速优雅展示一个自适应不错乱的静态页面

最新推荐文章于 2023-06-16 17:44:42 发布

Point酱

最新推荐文章于 2023-06-16 17:44:42 发布

阅读量805

点赞数 1

分类专栏：前端文章标签： vue.js 前端 css 兼容

本文链接：https://blog.csdn.net/weixin_40571965/article/details/125373783

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

最近处理一个问卷收集的需求，乍一看很简单，工期给的也很短。

但在启动项目时，仔细想想问题就来了，这个页面很可能会在不同的设备中打开。如果时间充裕，我们当然要根据设备定制不同的展示办法，但是就是个问卷且开发时间短的前提，如何让用户不管在哪里打开都是一个完美的好看的页面呢。

经过评估，解决办法来了

利用transform的属性，使得页面根据页面去自适应的缩放，那么不管用户屏幕什么分辨率，我们都可以让他看见一个不错乱和UI稿一致的页面。

🌰

在utils文件夹下建一个js文件，我们将适配方法写入。

我这里设置的最大宽度为1260

// 检查是否是移动设备
export const checkMobile = () => {
    let check = false
    check = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    )
    if(check == null){
        check = true
    }
    if (window.innerWidth > 1260) {
        check = false
    }
    return check
}

// 适配移动设备进行缩放
export const mobileScale = () => {
    const designWidth = 1260 
    const scale = window.innerWidth / designWidth
    const translate = ((window.innerWidth - designWidth) / 2 / window.innerWidth) * 100
    return `scale(${scale}) translate(${translate}%, ${translate}%)`
}

在App.vue文件调用中，设置

<template>
  <div class="main-box" :class="{ isMobile: isMobile }" :style="styleObject">
    <div class="main-container">
      <Header v-show="!$route.meta.hideHeader" />
      <router-view />
      <Footer />
    </div>
  </div>
</template>
<script>
import { onMounted, toRefs, reactive } from "vue";
import Header from "@/components/head/index.vue";
import Footer from "@/components/bottom-footer/index.vue";
import Mobile from "@/components/head/mobile-header.vue";
import { useRouter } from "vue-router";
import { checkMobile, mobileScale } from "@/utils/mobile-device-adapter";//here
export default {
  components: {
    Header,
    Footer,
    Mobile,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      isMobile: false,
      styleObject: {
        transform: "",
      },
      isShow: false,
    });

    const mobileResize = () => {
      if (state.isMobile) {
        state.styleObject.transform = mobileScale();
      } else {
        state.styleObject.transform = "";
      }
    };
    onMounted(() => {
      state.isMobile = checkMobile(); //判定机型
      mobileResize();
      window.onresize = () => {
        state.isMobile = checkMobile();
        mobileResize();
      };
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
.main-box {
  height: 100%;
  min-width: 1260px;
  .main-container {
    padding-top: 0px;
    text-align: center;
  }
}
</style>