Vandaag had ik een echt gênante ervaring. Zoals gewoonlijk gebruikte ik window.innerWidth om de breedte van de browser te meten en schreef ik de code zodat isMobile = true werd als het minder dan 768px was. Ik had grondig getest, op verschillende apparaten zoals de iPhone en Galaxy, en controleerde die op Safari, Chrome en de Brave-browser om te bevestigen dat er geen problemen waren.

Maar…

Een kennis vertelde me plotseling dat mijn webapplicatie er vreemd uitzag op de Samsung-browser van de Galaxy. "Zou dat echt waar zijn?" Maar toen ik zelf testte, ontdekte ik dat in de Samsung-browser zelfs op mobiele apparaten window.innerWidth < 768 als false terugkeerde, wat een vreemde situatie was.

Ik begreep het niet. Het was al vreemd dat dit alleen in de Samsung-browser gebeurde, maar ik ontdekte ook dat de Chrome- en Firefox-browsers op de PC in de ontwikkelaarmodus ook false teruggaven wanneer ik het mobiele scherm controleerde.

Developer testing a website on a smartphone

Verschillende pogingen om het probleem op te lossen

Ik testte onmiddellijk andere methoden.

1. window.innerWidth

const isMobile = window.innerWidth < 768;

✅ Werkt normaal op reguliere browsers
❌ Retourneert false in de Samsung-browser en PC Chrome/Firefox ontwikkelaar modus (mislukt)

2. document.documentElement.clientWidth toegevoegd

const isMobile = (window.innerWidth || document.documentElement.clientWidth) < 768;

✅ Logisch veilige code
❌ Nog steeds false in Samsung-browser en ontwikkelaar modus (mislukt)

3. Gebruik van window.matchMedia('(max-width: 767px)')

const isMobile = window.matchMedia('(max-width: 767px)').matches;

✅ Werkt normaal in alle browsers! (succes 🎉)

Na deze resultaten trok ik mijn conclusie.
Voortaan moet window.matchMedia worden gebruikt om de mobiele status te bepalen.

Waarom gebeurde dit?

Eerlijk gezegd is het moeilijk om de exacte oorzaak te kennen zonder de interne bronnen van de browser te bekijken. Maar we kunnen wel speculeren.

  1. Verschil in renderingswijze van de Samsung-browser
    De Samsung-browser is Chromium-gebaseerd, maar heeft verschillende aangepaste optimalisaties. Dit kan de window.innerWidth waarde anders laten functioneren dan in andere mobiele browsers.

  2. Reden voor PC Chrome & Firefox ontwikkelaar modus
    Wanneer je de "mobiele weergave" functie in de ontwikkelaar modus activeert, past de browser niet alleen de schermgrootte aan, maar verandert hij ook intern verschillende instellingen. Echter, niet alle omgevingen emuleren een echt mobiel apparaat 100% perfect. Dit kan de reden zijn waarom de window.innerWidth waarde anders functioneert dan op echte apparaten.

  3. Verschil in het al dan niet opnemen van de scrollbar
    window.innerWidth omvat de breedte van de viewport, terwijl document.documentElement.clientWidth de werkelijke breedte van de inhoud zonder scrollbar retourneert.
    Is het mogelijk dat de Samsung-browser scrollbar intern anders behandelt? Maar die hypothese kon niet alle fenomenen verklaren.

In conclusie…

Gebruik in de toekomst matchMedia om de mobiele status te controleren

Door deze ervaring realiseerde ik me dat methoden zoals window.innerWidth niet betrouwbaar zijn.
Voortaan is het veiliger om matchMedia zoals hieronder te gebruiken om de mobiele omgeving te bepalen. 

const isMobile = window.matchMedia('(max-width: 767px)').matches;

📌 Als je deze methode gebruikt
✅ Werkt normaal in alle browsers.
✅ Levert consistente resultaten in de ontwikkelaar modus.
✅ Functioneert probleemloos in vreemde omgevingen zoals de Samsung-browser.

Soms denk ik dat ontmoetingen met deze onverwachte bugs deel uitmaken van het proces om een betere ontwikkelaar te worden. Hoe dan ook, vandaag dankte ik de Samsung-browser(?) voor het realiseren van de noodzaak van matchMedia. 😆