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:
- Dodać jedną zależność w pliku pom.xml
1234<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mobile</artifactId></dependency> - 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.
1spring.mobile.devicedelegatingviewresolver.enabled=true - 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
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:
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:
UPDATE2: Historie komórkowe
A dlaczego nie użyjesz Bootstrapa?
A dlaczego użyć?
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.
Nawet bez bootstrapa można to zrobić, poczytaj o css media queries 🙂
Strony typowo mobilne wypadły już z obiegu, wszystko leci jako responsywne 🙂
Dzięki! Jesteś już drugą osobą, która mówi mi o @media w CSS3. To był świetny pomysł z tym konkursem.