Test-possibility for TW for different displaysizes?

#1

Hello,

now I got suddenly a second student for learning german and I need to fastly adjust my both “learn german”-TWs to different display sizes. Every student gets his own TW.
I made that many years before for my own wikis: Having 2 different stylesheets (1 for the computer & 1 for the tablet) and toggling between them with a button. It works perfect. But I don’t remember exactly anymore, which parts of it I need to adjust to match the displaysize. At that past time I tested everything on my tablet lying next to my computer.
But now I don’t have the possibility for that direct testing, because my students need their phones of course.

Is there any possibility to test my TW-stylesheet somewhere online for different displaysizes? For example for the Samsung Galaxy A53?
I tried it with Firefox menu >Additional tools >Test displaysizes and changed the stylesheet on my computer in that way. But unfortunately the changed stylesheet does not fit at the display of that one student not at all.

Googled for it I found a lot for developing android apps, and so on, but nothing, where I could just emulate a different displaysize. Do you know a possibility?
Thanks a lot!

#2

If you open the dev tools of your web browser, you can emulate various display sizes:

To automatically toggle style according to the size of the screen, you could use mediaqueries

#3

Thank you @telumire !
I downloaded Chrome now only for this… I did the same screen testing with Firefox, but in Chrome it’s a bit better, so I could do it better there.
I hope, that now it is correct for that phone- I will see in the next days…
These mediaqueries: I think, this is not exactly fitting enough. Because one phone has maybe 320, another 375px width and the third one 425px. So, there will be probably always something a little bit not fitting. But for “a little bit not fitting” the phone-displays are too small in my opinion- it should perfectly fitting.