Hallo Gerhard01,
als ersten Ansatz kannst Du die Fenstergröße des Browsers verändern. Damit kannst schon eine Menge abfangen, allerdings hat dieses Fenster oft eine zu große Mindestbreite.
Voraussetzung ist, dass Responsivität deiner Seite richtig gemacht ist. Dafür muss nach aller Möglichkeit CSS verwendet werden, mit Angaben die relativ zur Bildschirmgröße sind, und Media Queries, die dafür sorgen, dass nur bei genug Platz auf dem Bildschirm auch ein Layout greift, das den Platz nutzt. Auf eine Layout-Steuerung mit JavaScript sollte man nur ausweichen, wenn es mit CSS Mitteln gar nicht geht. Und dann wäre die erste Frage: Wenn CSS das nicht kann, brauch ich das dann? Mit den modernen CSS Layouts (Flexbox, Grid) und Positionierungen (Sticky, Fixed) geht sehr viel, ohne dass man JavaScript bemühen muss. Einen Internet Explorer 11 lässt man dann zumeist ratlos zurück, und dafür braucht man eine Darstellungsvariante, mit der zumindest erkennbar ist, was die Seite darstellen soll. Schön sein muss sie mit dem IE nicht mehr. Es sei denn, man arbeitet in einer Firma, die den IE immer noch als Hauptbrowser im Intranet nutzt, so wie ich 🤮.
Für beliebige Viewportgrößen gibt es den Device Simulator in den Entwicklerwerkzeugen von Chrome und Firefox. F12 drücken und das Icon klicken, das ein Handy und ein Tablet zeigt. In Chrome links oben, in Firefox rechts oben. In beiden Browsern ist der Simulator auch per Shortcut Strg+Shift+M aktivierbar - nur: in Chrome muss dafür das Fenster mit den Entwicklerwerkzeugen aktiv sein und in Firefox das Hauptfenster des Browsers.
Im Firefox kannst Du relativ leicht die Größen und auch das Verhältnis CSS Pixel zu Gerätepixel verstellen, in Chrome ist das Pixelverhältnis etwas umständlicher. In beiden Browsern kannst Du auch von Hoch- auf Querformat umschalten. Und sie simulieren Touch-Operationen. Für Mehrfinger-Gesten brauchst Du allerdings ein richtiges Touch-Display.
Sicherlich wird es Fälle geben, wo das nicht ausreicht. Aber das sind nicht viele.
Rolf
sumpsi - posui - obstruxi