Gibt es eine Möglichkeit in CSS oder Javascript zu erkennen, ob ein Benutzer eine HTML-Seite auf seinem iPad als Web-App sieht?

Question

Ziemlich einfache Frage, ich habe eine Webseite, die ausschließlich auf iPads verwendet wird. Ich habe es so eingerichtet, dass Sie es auf dem Startbildschirm speichern und als Web-App verwenden können. Ich frage mich, ob es einen Weg über Javascript oder CSS gibt, um festzustellen, ob die Seite vom Browser aus gesehen wird, mit allen Navigationselementen oben, oder ob sie gestartet wurde und gerade durchsucht wird als eine Web-App.

Ich habe versucht, Medienabfragen verwenden, um verschiedene Stile für Web-App vs mit Navigation Browser einzurichten, aber ich konnte nicht herausfinden, eine Abfrage, die funktionieren würde.

Answer 1

Aha, es in der Safari-Dokumentation gefunden: window.navigator.standalone

Answer 2

nur ein Stich in die Dunkelheit, aber vielleicht können Sie einen Blick auf die Position/URL der aktuell angezeigten Datei - Sie sollten in der Lage sein, den Unterschied einer Datei auf dem Desktop gegenüber einem von einem Webserver serviert unterscheiden.

Answer 3

Es ist eine Schande Sie brauchen für diese JS zu verwenden, aber das ist so, wie es ich nehme an ist. Sie könnten den Browser wirklich gezielt über ausgefeilte Medienabfragen ansprechen (Sie können zum Beispiel Konditionale verwenden), aber Sie haben es wahrscheinlich schon versucht. Schließlich, wenn Sie JS trotzdem verwenden werden (das Standalone ist etwas, das ich erst kürzlich selbst entdeckt habe), sollten Sie vielleicht auch Modernizr in Betracht ziehen - ein einfaches Stück JS, das dem HTML-Tag basierend auf den Fähigkeiten des Browsers Klassen hinzufügt Theoretisch ist es besser, den Browser auf bestimmte Stile/Verhaltensweisen auszurichten, als den Namen/die Eigenschaften des Clients über JS abzufragen, da dies theoretisch verfälscht werden kann. Zum Beispiel fügt Modernizr eine Klasse basierend darauf hinzu, ob ein css3-Grenzradius möglich ist oder nicht.