intro.js样式溢出 无法适应手机分辨率以及无法自己修改样式

[liao-heng12]

我用红色的框标注得是 我的页面的大小 ，没有加intro.js页面无溢出 适配各种手机分辨率 我是用这个intro.js 来介绍我的宫格，【页面是由 vant （https://youzan.github.io/vant/#/zh-CN/）的宫格 组成的 是iPhone6的分辨率（375X667） 用开发者工具调试 框架 vue 】 但是提示工具到了最后一个宫格溢出了我的分辨率 将我的页面向左边挤压 我尝试position无效 依然溢出 class 也没有办法去弥补这个缺陷 并且无法适配iPhone5 依然会溢出 并且在iPhone5 和iPhone6中 提示框都太大了 写过样式 控制这个框的大小无效 第二张图片我用2.9.3的版本 可以适配iPhone5和6 在最后一个宫格不会溢出 红色框为页面大小 但是因为样式不好看 要改好看点 局限太大 想用新版的样式 最后 我试过回退到3.的版本都有这样子的问题 希望大家可以回复我 帮助我处理这个问题 很急 谢谢大家 💗

[liao-heng12]

//html

    <van-grid-item id="v-step6" icon="video-o" text="第六个宫格" to="/Home" />
    <van-grid-item id="v-step7" icon="cash-back-record" text="第七个宫格" to="/Home" />
    <van-grid-item id="v-step8" icon="refund-o" text="第八个宫格" to="/Home" />
  </van-grid> -->

//引导页的方法 guide () { var intro = IntroJs() intro.setOptions({ nextLabel: '下一个', // 下一个按钮文字 prevLabel: '上一个', // 上一个按钮文字 overlayOpacity: 0.7, steps: [ { element: document.querySelector('#step1'), // 目标元素 title: '第一个宫格‘ }, { element: document.querySelector('#step2'), intro: '第二个宫格', interaction: 'false'， position: 'right' }, { element: document.querySelector('#step3'), intro: '第三个宫格', disableInteraction: true, position: 'right' }, { element: document.querySelector('#step4'), intro: '第四个宫格', disableInteraction: true }, { element: document.querySelector('#step5'), intro: '第五个宫格', disableInteraction: true, position: 'left' }, { element: document.querySelector('#step6'), intro: '第六个宫格', position: 'top-left-aligned', disableInteraction: true }, { element: document.querySelector('#step7'), intro: '第七个宫格', disableInteraction: true }, { element: document.querySelector('#step8'), intro: '第八个宫格', disableInteraction: true } ] }) let router = this.$router // 作用域访问不到 提示变量 this.$nextTick(() => { var IntroJS = require('intro.js') IntroJS().start() // 退出引导调用 exit() 即可 }) // 退出引导回调函数 intro.onexit(function () { localStorage.setItem('isShowHelp', 1) }) intro.oncomplete(function () { alter('体验完了') }) intro.setOption('doneLabel', '立即体验').start({ }) },