turnjs翻页功能，在我使用transform: scale(0.56389, 0.56389) 通过js对不同电脑显示器进行适配操作时出现了bug，求解决方案！
lvr1997 opened this issue · 4 comments
lvr1997 commented
问题：我在通过js实现 对不同电脑显示器进行适配操作时，使用了如下代码：transform: scale(0.56389, 0.56389)
但是我发现，当我加上它之后，我点击书的右侧，他不能翻页了，
当我将这段样式 从开发者模式中注销掉时，就恢复正常了。所以我现在搞不清楚，是什么原因引起的这一现象？求解决方案
如下 是我的相关代码：
//页面加载时执行
$(function() {
calcRate()
window.addEventListener('resize', resize)
})
//自适应translate(-50%, -50%)
function calcRate() {
const appRef = document.getElementById("canvas")
if(!appRef) return
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
} else {
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
}
}
}
function resize () {
clearTimeout(drawTiming)
drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
hyf-hub commented
你可以使用 turn4 其中的size方法可以达到该效果
hyf-hub commented
你可以使用 turn4 其中的size方法可以达到该效果