javascript在更改设备宽度时更改文本

大家好，当设备的宽度改变时，我想改变屏幕上的文字，我用javascript编写了这段代码，但它没有改变文字，只给了我最后一个正确的选项

var heightDevice = document.getElementById('startup-animation').offsetHeight;
var widthDevice = document.getElementById('startup-animation').offsetWidth;
console.log(widthDevice);

if (widthDevice <= 480) { //smartphone
  document.getElementById('TextStartUp').innerHTML = 'touch the screen to continue.';
}
else if (widthDevice <= 768) { //tablet
  document.getElementById('TextStartUp').innerHTML = 'touch the screen to continue.';
}
else if (widthDevice <= 1024) { //tablet landscape
  document.getElementById('TextStartUp').innerHTML = 'touch the screen to continue.';
}
else if (widthDevice <= 1680) { //laptop
    document.getElementById('TextStartUp').innerHTML = 'Press any key to continue.';
}
else if (widthDevice > 1680) { //desktop
    document.getElementById('TextStartUp').innerHTML = 'Press any key to continue.';
}

var heightDevice=document.getElementById（'startup-animation'）。offsetHeight；
var widthDevice=document.getElementById（'startup-animation'）.offsetWidth；
控制台日志（设备）；
如果（widthDevice更新：我已经提供了一个Javascript解决方案，但是对于这个小任务，我认为使用Javascript是一种过火的行为

你可以尝试这个纯CSS的解决方案，在这个解决方案中，你的HTML保持不变，这也会很好的执行

纯CSS解决方案：


#text启动{
位置：相对位置；
}
#text启动：：之后{
位置：绝对位置；
左：0；
排名：0；
内容：“触摸屏幕继续”
}
@介质（最小宽度：1024px）{
#text启动：：之后{
内容：“按任意键继续。”
}
这是一种古老的技术（你现在的做法）而且可以工作。但是你有没有研究过响应性设计和媒体查询？它们都可以根据需要在combo中用于某些场景，javascript方式用于快速修复。是只是为了更改文本，而不是页面的样式，通过媒体查询我可以更改文本，还是你建议制作几个段落并仅在屏幕上显示你是否关心媒体查询？试试window.innerWidth，看看结果是什么：）事实上只有CSS可以解决这个问题：的确是@ImranRafiqRatherTrue。但我想在任意屏幕大小（每个设备）上添加“触摸屏幕”或“按任意键”的整个概念在UI/UX级别上有点疯狂。考虑到键盘可以连接到较小的设备。信息中应该简单地提及两者。触摸屏和按键也有事件：）但浏览器支持可能会有所不同。但是可以实现：）