larryzhu-dev / autofit.js Goto Github PK

resize && (window.onresize = () => {
      keepFit(designWidth, designHeight, dom, ignore);
})

建议改为

resize &&
      window.addEventListener('resize', () => {
        keepFit(designWidth, designHeight, dom, ignore)
      })

这个是我没有全屏的样子

这个是我全屏的样子

没有全屏的时候宽度没有沾满
全屏的时候高度没有沾满

目前：

期望：

目前支持 同时缩放xy轴，我期望 ignore 可以支持 仅缩放x轴、仅缩放y轴。为了兼容老api，增加 ignoreX 和 ignoreY 来实现，你觉得怎么样？（我不确定我的使用是否正确，这是就目前情况来看我的想法）

上次反映的 日历插件问题值不加拖拽功能就还好，这次这个 element-plus 就难受了。 弹窗后会造成页面右侧留白，element-ui 版本弹窗没有这个问题。
演示地址

绑定Body后，Select的下拉弹窗位置错误了。如果不绑定body，绑定到body下面的元素，由于下拉框都是渲染到Body下的，下拉框又不会被缩放。

keepFit函数中let height = Math.round(clientHeight / currScale);let width = Math.round(clientWidth / currScale);如果currScale缩放比例是小于1的话，那缩小的情况下宽高不是更大了吗？不知道是不是这个原因导致的

使用 autofitjs 后FullCalendar 本身得高度宽度自适应会出现偏差，外部拖拽事件会发生偏移。使用 ignore和elRectification 方式也不大好使。
"@fullcalendar/vue3": "^6.1.9"
"autofit.js": "^3.0.6"
演示地址

如elementUI和各类UI库的弹出层，是基于屏幕坐标计算弹出层位置的，经过transform后，这些计算也会偏移，但是这些偏移是有迹可循的，一般是
鼠标移动距离左上角占真实屏幕的百分比 == 整个页面等比缩放后内部元素所在位置到左上角占缩放后元素的百分比

对此应该由第三方工具调整元素位置的计算策略，以真实的屏幕宽高计算元素位置，或者将弹出层以其父元素为基准偏移，并挂载在body内部。

大佬太赞了，前来膜拜，是否可以搞一个预览，能够直观的体验一下？

echarts 图标偏移问题

正常路由跳转页面缩放正常，f5刷新页面会导致UI显示比例异常

使用transform: scale(0.465104); 会对页面el-dialog的蒙版影响，蒙版把元素当下面了，这个有解决办法么？

我是vue2项目，我在app组件上用了所有button按钮点击后会出现灰色遮罩
mounted() {
autofit.init(
{
dh: 1080,
dw: 1920,
el: "#routerview-box",
resize: true,
ignore: [
{
el: ".gaodeMap",
},
],
},
false
);
},
beforeDestroy() {
autofit.off();
},

我用了下面的形式就没有了，不知道上面的形式是什么原因
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom: "#app",
resize: true,
});
},

beforeDestroy() {
	autofit.off();
},

scale缩放值是小数会导致文字失真，有办法解决吗

mounted() { autofit.init({ dh: "1080", dw: "1920", el: "#app", resize: true, }); },

这样设置，正常缩放，但是底部有留白，我的 Page 高度设置为 100vh，占不满

把 tooltip 悬浮框添加在 body 中就不会出现这个问题

currelRectification参数未赋值导致空选择器
在off方法中调用的document.querySelectorAll(currelRectification)中并未用到传入的el参数也，会报错Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': The provided selector is empty. at <anonymous>:1:27

autofit.js 造成 fullCalendar 自适应异常，外部事件拖拽位置偏移

注释 autofit.init() 就正常

elRectification 方法，本地试了也没有用
演示地址

作者能否提供umd版本的,好像没有提供,只有esm版本的

let clientHeight = document.documentElement.clientHeight;
let clientWidth = document.documentElement.clientWidth;

有些大屏页面可能并不是撑满浏览器的，比如有菜单栏，头部导航栏。
能不能增加自定义容器customContainer，如下

let container =document.querySelector(options.customContainer)
let clientHeight = container.clientHeight;
let clientWidth = container .clientWidth;

大佬，再页面内引入dialog组件页面会导致页面缩小，啥情况？我看了掘金上面的文章和评论区尝试了一些方法，均未生效。

上面是第一次打开时，画布大小正常

该图为第二次打开时，画布大小为未缩放的原始尺寸
画布内容是在弹窗内的。
autofitjs版本：3.1.0

缩放过小过大底部可能出现留白，大概1-2px..浏览器调试发现给#app 元素高度+2px 就行了

vue环境，页面有双向绑定的事件，操作后，底部留白，改变浏览器高度，变正常

如果一个元素，在init之前是display none的，有没有add的方法将其加入自适应，比如antd的select组件，下拉前是不存在body中的，点开下拉后，和select的元素width没有同宽

默认popup实在该点位置上，请问有办法解决吗？

出错。
_autofit.init is not a function

我配置后出现留白的情况呢

下面是我配置的代码：

下面是我的全局文件挂载的dom节点，也就是在 #root 上，

请大佬帮忙解惑呢

想通过elRectification来忽略地图容器，但是报错：Cannot read properties of undefined (reading 'isAutofitRunnig')

onMounted(() => {
  elRectification('#map');
});

使用ignore忽略地图容器，会造成地图显示不全，容器宽度设置的都是100%，请问使用elRectification是否可以解决这问题，不忽略的话地图会显得很模糊

如二维码失效加微信：larryzhu-

autofit.js 问题请私聊群主

在这里可以学到什么：

1. 图表可视化和各种新奇技术
2. webgis 疑难杂症
3. 网页适配奇技淫巧
4. 前端框架深入交流

虽然忽略可以解决点击位置偏移的问题，但是会导致地图中心点整体向右偏移，在低分辨下偏移更严重

transform: scale(1.896); 后会导致单元格有白边。
已经使用使用 border-collapse: collapse; 合并了边框。

复现DEMO地址： https://codesandbox.io/s/autofit-demo-pkgzc6?file=/src/App.vue

根据readme中描述，使用autofit.js，能够自动的拉伸或者缩小，对于大屏开发来讲，的确解决了好多问题，这里有两个基础的地方不太明白：
根据设计稿进行页面开发，最外层容器的宽与高是用设计稿的像素还是百分比？还是两者兼可？
容器内部各个元素的宽高，以及padding，margin的值用像素还是百分比？css可定义的值太多了，px, rem ,vh/vw，em，这些在引用autofit.js的项目中，是可以混用，还是单纯便用px来统一开发？

添加全局缩放之后，再加高德地图进去，拖拽感觉不够丝滑了，而且缩放也不是以鼠标所在位置开始缩放，是什么问题呀？

如题 window.devicePixelRatio 可以获取到系统缩放百分比

请问这个autofit.js支持vue2嘛？