Mobilna wersja strony w Spring Boot

Moja konkursowa aplikacja właściwie nic jeszcze nie robi – ot, wyświetla kilka widoków. Dzisiaj przetestowałam nowy drobiażdżek: wyświetlanie innej wersji strony na urządzeniach mobilnych.

Jak to zrobić? W Spring Boot to naprawdę prosta sprawa. Wystarczy:

  1. Dodać jedną zależność w pliku pom.xml
  2. Dopisać poniższą linię w pliku resources/application.properties (utworzyć plik, jeśli nie istnieje), nadpisując tym samym domyślnie ustawienie właściwości.
  3. Zapisać mobilne wersje widoków w katalogu mobile (lub innym, jeśli zmienisz domyślną wartość właściwości spring.mobile.devicedelegatingviewresolver.mobilePrefix)

    Mobilne wersje widoków
    Mobilne wersje widoków

Po takim przygotowaniu możemy już podziwiać stronę w wersji normalnej i mobilnej. W swojej wersji mobilnej na teraz dodałam tylko słówko “MOBILE”. Wygląda to tak:

Wersja mobilna strony

Urządzenie mobilne udałam przy użyciu dość badziewiastego dodatku do Firefoksa o nazwie User Agent Switcher.

UPDATE: Marcin S. podpowiedział mi, że w Chrome można udawać urządzenie mobilne bez potrzeby instalowania żadnych dodatków:

Tryb mobilny w Google Chrome

UPDATE2: Historie komórkowe

Komentarze

8 myśli nt. „Mobilna wersja strony w Spring Boot”

    1. Tworzysz wtedy jeden plik w templates, a nie dwa. Jest mniej zmian. Projektujesz oczywiście strony na urządzenia mobilne i desktopy, ale dostajesz w gratisie narzędzia (klasy) które to ułatwiają. To jak wyświetla się strona zależy od rozdzielczości (ilość pikseli w oknie przeglądarki powiedzmy), a nie na User Agenta przeglądarki.

  1. Dzięki! Jesteś już drugą osobą, która mówi mi o @media w CSS3. To był świetny pomysł z tym konkursem.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *