CSS - Identifikation von Handy/Tablet

Question

Ich beginne mit einer Web App und Targeting Handys und Tablets.

Meine App besteht aus einer vollständigen Seitenanzeige ohne Scrollfunktion (z. B. müssen alle Inhalte auf diesen Geräten im Vollbildmodus angezeigt werden).

Ich werde vier verschiedene Ansichten haben: - Handy: Portrait - Handy: Landschaft - Tablet: Portrait - Tablet: Landschaft

Also dachte ich, ich brauche, um festzustellen, ob es ein Handy ist oder ein Tablet und erhalten ihre Auflösung, um die Größe der verschiedenen Elemente berechnen zu können. Ich muss auch herausfinden, ob es Porträt oder Landschaft ist.

Darüber hinaus möchte ich entweder Telefon oder Tablet-Größe auf einem Computer (zentriert auf dem Bildschirm) anzeigen, je nachdem, wie groß der Webbrowser ist.

Gibt es jemanden, der mir mit einem Code helfen kann, dies zu erreichen? Oder vielleicht verweisen Sie mich auf ein Framework/Github, das dies unterstützt?

Danke. Eirik

Answer 1

Sie können media queries und orientation in Ihrem CSS

@media only screen and (min-device-width: /*min width*/) and 
(max-device-width: /*max width*/) and (orientation: /*portrait or landscape*/) 
{ 
    /* your css */ 
}