Javascript - 在移动视口中调整滚动标题大小并进行覆盖

Question

我正在尝试做一个在滚动时改变字体大小的标题。 但由于字体太大，我不适合移动设备。

这是代码：

function scrollFunction() {
  if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
    document.getElementById("header").style.fontSize = "5em";
  } else {
    document.getElementById("header").style.fontSize = "10em";
  } if (navigator.userAgent.match(/Mobile/){
    document.getElementById("header").style.fontSize = "2em";
  }
}

有谁知道如何实现此功能或以其他方式说明该代码在移动设备上不应该工作吗？

Answer 1

哪一部分工作正常，现在对于移动设备，您可以通过媒体查询和 window.matchmedia 添加一项检查，它将找到您的窗口宽度并根据您的移动设备更改字体。让我们设置您的最大移动宽度360px，然后按照下面给出的操作：-

var x = window.matchMedia("(max-width: 360px)")
myFunction(x) 
x.addListener(myFunction)

function myFunction(x) {
  if (x.matches) { 
     document.getElementById("header").style.fontSize = "2em";
  } else {
  scrollFunction()
  }
}
function scrollFunction() {
  if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
    document.getElementById("header").style.fontSize = "5em";
  } else {
    document.getElementById("header").style.fontSize = "10em";
  }
}

希望对您有帮助。 谢谢 哈姆扎