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

Question

Hi everyone I would like to change the writing that comes on the screen when the width of the device changes, I made this code in javascript, but it doesn't change the writing and gives me only the last option correct.

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.';
}

Answer 1

UPDATE: I have provided a Javascript solution but for this small task, I believe going with javascript is an overkill.

You can try this Pure CSS Solution in which your HTML stays the same and this will be performant also. No Javascript is needed then.

PURE CSS SOLUTION:

 #TextStartUp{ position:relative; } #TextStartUp::after{ position:absolute; left:0; top:0; content:"touch the screen to continue" } @media(min-width:1024px){ #TextStartUp::after{ content:"Press any key to continue." }

 <div id="TextStartUp"></div>

JAVASCRIPT SOLUTION:

You don't require these many checks to show two text messages. Below code sums it up with just two if-else conditions. Try to resize your window:)

 if(window.innerWidth<=1024){ document.getElementById('TextStartUp').innerHTML = 'touch the screen to continue.'; } if(window.innerWidth >1024){ document.getElementById('TextStartUp').innerHTML = 'Press any key to continue.'; } // To see changes try to resize developer console window.addEventListener("resize",()=>{ if (window.innerWidth <= 1024) { //tablet landscape and below screens document.getElementById('TextStartUp').innerHTML = 'touch the screen to continue.'; } else if (window.innerWidth > 1024) { //laptop and above screens document.getElementById('TextStartUp').innerHTML = 'Press any key to continue.'; } })

 <div id="TextStartUp"></div>