larryzhu-dev/autofit.js

autofit.js 迄今为止最易用的自适应工具

autofit.js's Issues

当子元素使用position: fixed, 定位将会失效

最新更新的版本，使用react发现报错，而且非全屏没有显示全，是需要新的使用方法吗

element-plus 弹窗异常

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

设置后，高度无法占满，留有一部分白

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

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

window.onresize有兼容问题，当页面有另一个window.onresize时会失效

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

建议改为

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

我该使用 px 还是 % 开发？能使用 vh/rem 等相对单位吗？

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

希望增加一个是否初始化的方法

已解决

是否可以搞一个Demo页面？

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

echart 显示 tooltip 造成界面模糊

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

如果一个元素，在init之前是display none的，有没有add的方法将其加入自适应

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

浏览器页面刷新会出现UI异常

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

添加地图拖拽不流畅

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

宽度和高度不能沾满

这个是我没有全屏的样子

这个是我全屏的样子

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

页面有操作dom的事件，底部回留白

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

缩放会导致 table 的单元格出现间隙

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

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

fullCalendar 自适应失效

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

注释 autofit.init() 就正常

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

添加自定义容器

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;

echarts 图标偏移问题

echarts 图标偏移问题

扫码加入官方交流群

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

类型出错，可选参数还是要必传

使用transform: scale(0.465104); 会对页面el-dialog的蒙版影响

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

nuxt 直接用不了，_autofit.init is not a function

出错。
_autofit.init is not a function

【bug】currelRectification参数未赋值

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

用了这个插件滚动失效了

Cannot read properties of undefined (reading 'isAutofitRunnig')

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

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

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

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

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

使用插件后导致宽度被默认设置为 2171.31px

antd组件没有进行缩放,有什么解决方案吗?

你好，这个文件怎么引入项目中啊，下下来放本地引入吗？

当系统缩放不是100%的情况下，适配会有问题，是否考虑处理一下叠加系统缩放时的情况

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

antd的下拉框位置会错误

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

FullCalendar 插件自适应

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

手动缩放浏览器可以正常适应，点击最大化（或F11全屏）时却失效了

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

autofit.js 无法支持任何以屏幕坐标为基准计算属性的第三方插件

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

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

你好，我在使用时，发现留白，是使用方式不对吗

出现留白

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

下面是我配置的代码：

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

请大佬帮忙解惑呢

适应忽略元素进行地图忽略位置偏移的问题

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

希望支持dom实例，而不仅仅是字符串

页面内引入dialog组件页面会导致页面缩小

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

用了button按钮点击后会出现灰色遮罩

我是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();
},

地图叠加完点popup会有偏移

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

你好，大屏页面使用后，跳转到其他页面后，#app设置的效果还在，页面不能滚动下滑

缩放页面底部出现留白

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

elementui有关于popper，下拉错位

scale缩放值是小数会导致文字失真

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