react-antd 后台管理系统PC端按比例缩放到移动端

最新推荐文章于 2024-06-08 09:34:52 发布

web小洋

最新推荐文章于 2024-06-08 09:34:52 发布

阅读量1k

点赞数 2

分类专栏： JavaScript react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zfy21104/article/details/128202395

版权

react 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

问题描述

最近做的项目中，需要对react后台管理系统进行比例缩放，找了很多资料最终功夫不负有心人，解决了这个问题，记录一下

解决方案：

我的项目是umi创建的，src > pages > document.ejs 具体在哪修改看自己的实际情况

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    // user-scalable=yes 这个是最重要的 width设置移动端转到PC端的长度
    <meta name="viewport" content="user-scalable=yes, width=1920, minimum-scale=0.1" />
    <title>后台管理系统</title>
  </head>
  <body>
    <script>
      // 旋转之后要重新绑定，避免适配失败
      window.addEventListener("orientationchange", function() {
        let i = document.getElementsByTagName('meta');
        i[4]["content"] = "user-scalable=yes, width=1920, minimum-scale=0.1";
      }, false);
    </script>
  </body>
</html>