antd-mobile 高清方案疑问

发布于 2022-09-04 18:07:03 字数 2188 浏览 15 评论 0

本地环境

antd-mobile 版本:最新
浏览器 (或标明是 react-native) 及其版本:google chrome
运行环境及其版本:最新

你做了什么?

配置高清方案

你期待的结果是:

能够根据手机屏幕缩放显示内容

实际上的结果:

未能根据手机屏幕缩放显示内容

关键代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <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>
  <link rel="stylesheet" href="index.css"/>
</head>
<body>

<div id="root"></div>
<script src="index.js"></script>
</body>
</html>

.roadhogrc.js (疑问: 这个文件是在根目录, 跟.roadhogrc同一级吧? )

extraPostCSSPlugins: [
  pxtorem({
    rootValue: 100 * (1080 / 750),
    propWhiteList: [],
  })
]

说明:
设计稿采用的 1080,所以请教了paranoidjk 给出了以上计算公式 ~
我按照设计稿给出的尺寸设置, 发觉只有在1080像素屏幕上显示正常 ~
在750下, 并未缩放, 而是按1080的方式展现 ~

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

假装不在乎 2022-09-11 18:07:03

.roadhogrc.js 未配置成功导致~

雨夜星沙 2022-09-11 18:07:03

怎么配置的啊。。贴个方法吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文