Misschien handig om de extensie Browserstack in Chrome te installeren? Hiermee kan je heel veel devices simuleren zodat je kan checken of alles er goed uit ziet.
Deze extensie én andere tools waarmee je apparaten en/of vaste resoluties kan emuleren zijn al jaren niet meer zinvol. Alleen de "responsive" emulatie, als deze in een browser of tool zit, is zinvol.
Inmiddels zijn er veel verschillende browsers op verschillende apparaten op verschillende platforms (Win/OSX/Linux/Android/iOS/enz.). Daardoor is het niet mogelijk om
alle combinaties hiervan te controleren of de website er goed uit ziet. Bovendien staan browsers op pc en laptop op een random breedte die van tevoren niet bekend is. Dit is de reden waarom de website van femke98 een responsive website is. De website zal zich aanpassen aan de viewport (bruikbare deel) van de browser. Een responsive website probeert niet te achterhalen welk apparaat, welke browser, welke resolutie en welk besturingssysteem het is, dat is complex en niet future-proof.
Je kan eenvoudig elke viewport (netto bruikbare deel) van de browser testen door (met de muis) de browser op je PC van heel breed naar heel smal te bewegen en te letten op effecten die niet op de website thuis horen. Bijvoorbeeld de horizontale schuifbalk mag niet tevoorschijn komen want dan is er overflow buiten je browser viewport.
Ik heb de meest gebruikte browsers bekeken of je er out-of-the-box responsive mee kan testen. Een smartphone heeft altijd een "css resolutie" van circa 310 tot 550 pixels. Gebruik daarom voor smartphone in de css altijd een width:100% dan werkt het altijd goed op elke smartphone. Voor grotere apparaten (tablet, printer, monitor, enz) gebruik je in de css de @media(min-width:...) en/of @media(max-width:...).
Als een browser een 'responsive viewport' optie heeft waarmee je kan testen vanaf 300 px, dan kan je alle breedtes (dus alle apparaten) testen.
Chrome
De viewport is 500 px of breder. Deze viewport kan in DevTools kleiner gemaakt worden. Chrome heeft in DevTools een goede responsive weergave tool.
Opera
De viewport is 460 px of breder. Deze viewport kan in DevTools kleiner gemaakt worden. Opera heeft in DevTools een goede responsive weergave. Er zit een kleine bug in de 'touch & move' emulatie maar voor het responsive testen heeft dit geen invloed.
Firefox
De viewport is 454 px of breder. Deze viewport kan in "responsive design modus" kleiner gemaakt worden.
Let op: In de "responsive design modus" kan je
niet echt responsive testen zoals bij Chrome, Opera of IE11.
Edge t/m versie 78
De viewport is 372 px of breder. Deze viewport kan in de Ontwikkeltools kleiner gemaakt worden. Er is géén responsive emulatie mogelijk.
Edge versie 79+ (Chromium)
Nog geen info.
Internet Explorer 11
De viewport is 232 px of breder. Met IE11 kan je zonder Ontwikkeltools direct controleren of een website goed responsive is. Omdat IE11 standaard in Windows 10 zit is dit een makkelijke test tool.
Safari op iMac
De viewport is ??? px of breder. Deze viewport kan in de Adaptieve Ontwerp Modus (ontwikkel menu) kleiner gemaakt worden. Safari heeft een goede responsive weergave tool.
Conclusie
Als je met Chrome of Opera werkt dan heb je echte responsive emulatie. Alternatief is IE11 omdat de viewport direct smal genoeg is om smartphone breedte te emuleren.
