antd mobile（二）高清方案配置

浅浅的花香味﹌ 2022-06-10 07:11 258阅读 0赞

昨天把环境跑起来了，在chrome上正常，在safair上竟然就展示了50%。一猜就知道是mate的viewport设置问题。  
又是几个小时的找资料配置才搞定，都是坑啊。  
昨天搭建环境时字体过大，网上的方案是

修改成

效果就是chrome、360可以正常，但safair、firefox都显示异常。  
最终配置应该是如下的：  
第一步:修改public/index.html文件：其实就是将viewport的设置通过一个js脚本代替了

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      
      <meta content="yes" name="apple-mobile-web-app-capable">
      <meta content="yes" name="apple-touch-fullscreen">
      <meta content="telephone=no,email=no" name="format-detection">
      <script> !function(e){ function t(a){ if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){ "use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){ var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1); </script>
      <title>Dva Demo</title>
      <link rel="stylesheet" href="index.css" />
    </head>
    <body>
    
    <div id="root"></div>
    
    <script src="index.js"></script>
    
    </body>
    </html>

第二步：修改.roadhogrc.js文件，这里是将.roadhogrc删除了，将相应配置都放到.roadhogrc.js里咯

import pxtorem from 'postcss-pxtorem';
    const path = require( 'path' );
    
    
    export default {
      entry : "src/index.js" ,
      disableCSSModules : false ,
      publicPath : "/" ,
      theme : "./theme.config.js" ,
      autoprefixer : {
        browsers : [
          "iOS >= 8" ,
          "Android >= 4"
        ]
      } ,
      extraPostCSSPlugins : [
        pxtorem( {
          rootValue : 100 ,
          propWhiteList : [] ,
        } ) ,
      ] ,
      // style 必须是 true
      extraBabelPlugins : [
        "transform-runtime" ,
        [
          "import" ,
          { libraryName : "antd-mobile" , "libraryDirectory" : "lib" , "style" : true }
        ]
      ] ,
      env : {
        development : {
          extraBabelPlugins : [
            "dva-hmr"
          ]
        }
      }
    };

第三步：在.roadhogrc.js引入了 theme : “./theme.config.js” 文件，主要是用于修改手机端antd mobile的一些默认css的配置信息  
theme.config.js的内容如下：

const fs = require('fs');
    const path = require('path');
    const lessToJs = require('less-vars-to-js');
    
    module.exports = () => {
      const themePath = path.join(__dirname, './themes/default.less');
      return lessToJs(fs.readFileSync(themePath, 'utf8'));
    };

themes/default.less的内容如下：

// 本文件是对 ant-design-mobile:
    // https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
    // 相应变量值的覆盖
    // 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
    @import '~antd-mobile/lib/style/themes/default.less';
    
    // 色彩
    // ---
    // 文字色
    @color-text-base: #333; // 基本
    @color-text-secondary: #999; // 辅助色
    @color-text-caption: #999; // 辅助描述
    @color-text-paragraph: #333; // 段落
    
    // 全局/品牌色
    @brand-primary: #717176;
    @brand-primary-tap: #dd7742;
    //
    // 圆角
    // ---
    @radius-md: 40px;
    
    // 边框尺寸
    // ---
    @border-width-sm: 1px;
    
    // 字体尺寸
    // ---
    @font-size-icontext: 16px;
    @font-size-caption-sm: 20px;
    @font-size-base: 24px;
    @font-size-subhead: 26px;
    @font-size-caption: 28px;
    @font-size-heading: 30px;
    @font-size-display-sm: 32px;
    @font-size-display-md: 28px;
    @font-size-display-lg: 44px;
    @font-size-display-xl: 56px;
    
    // button
    @button-height: 80px;
    @button-font-size: 32px;
    
    @button-height-sm: 56px;
    @button-font-size-sm: 22px;

webpack.config.js的配置内容如下：

配置搞定，在各种浏览器上都展示正常