Schimbare de JavaScript în funcție de device-ul folosit (mobil sau desktop)

N-am uitat că am un blog. Pur și simplu, am 1000000000000000000 de făcut. Și toate sunt lucruri care mai de care din domenii total diferite între ele.
Revenind la lucrurile legate de acest minunat titlu. A trebuit să fac pentru ceva magazin online un script care afișa ceva informații dinamice. Practic, trebuia să iau niște valori din baza de date și să apară în timp real vizitatorilor.

Toate bune și frumoase și nu neapărat ceva complicat. Numai că fișierul JS pe care îl aveam se afișa absolut total stupid pe varianta de mobil a siteului și încărca mult prea mult pagina. Deși, mulți spun că Google Pagespeed Insights nu este neapărat relevant, siteul despre care povestesc acum avea un scor de 5.

Așa că am făcut un script separat pentru mobil.

După consultări pe stackoverflow și ceva scripturi de pe GitHub pe care le-am tot stricat, am ajuns să fac un JS nou pentru varianta de mobil. Făcea același lucru care și varianta de desktop, dar cu o altfel de afișare în CSS și cu mult mai puține resurse consumate. Iar elementul afișat avea și o sensiblitate la touch, lucru la care, personal, sunt bâtă :))))))))

Am găsit după câteva ore de încercat soluții, care mai decare fără niciun sens, un cod atât de simplu și care mi-a făcut să îmi dau seama cât de mult mă complic în redactarea unei soluții.

Și da… m-am folosit de rezoluția deviceului, practic ceva super similar cu @media de la CSS.

<script>
if (screen && screen.width > 900) {
  document.write('<script type="text/javascript" src="https://url-de-site.com/vizitatori-desktop.js"><\/script>');
}
</script>

<script>
if (screen && screen.width < 900) {
  document.write('<script type="text/javascript" src="https://url-de-site.com/vizitatori-mobil.js"><\/script>');
}
</script>

Funcționează perfect, deși, am avut câteva reclamații când am prezentat soluția respectivă altor mușterii.
Succes!

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.