Osobna strona dla web jak i mobilki

pytanie zadane 20 stycznia 2019 w HTML i CSS przez nielotweb Bywalec (2,240 p.)

W jaki sposób mogę oddzielić stronę dla ekranów monitorów a mobilnych? W sensie, dla przykładu gdy wchodzimy na facebook na komputerze to normalnie się odpala dla dużych ekranów a jak na tel. to odpala się tak jakby inna strona ( m.facebook.com ) dla mobilki.

Jak mogę to osiągnąć?

2 odpowiedzi

odpowiedź 20 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 20 stycznia 2019 przez nielotweb

Najlepsza

Są biblioteki, które pozwalają wykryć rodzaj urządzenia i na tej podstawie możesz serwować domena.pl lub np. redirect na m.domena.pl ale chyba wszystkie one (przynajmniej te których sam kiedyś używałem) bazowały na potężnych regexp i analizach m.in. user agent... dzisiaj jest to niezbyt dobre rozwiązanie, bo postęp technologiczny idzie szybko do przodu i uważam, że wykrywanie rodzaju urządzenia, np. modele itp. to zły pomysł.

Generalnie RWD w takiej najprostszej postaci to serwowanie różnych rzeczy w zależności od wymiarów dostępnego okna. I tak np. możesz sobie zrobić jakieś breakpointy np. 544px i zakładać, że poniżej tego traktujesz usera jako mobil web i serwujesz mu nieco mniej treści (możesz to łatwo ograć JS) czy inne CSS itp.

Idąc dalej możesz dla mobilek dodawać funcjonalności dla różnych specyficznych dla nich eventów poprzez proste sprawdzenie czy taki event istnieje itp.

A posiadanie dwóch domen, a w sumie subomeny m. ma też wadę taką, że musisz utrzymywać kod dla dwóch wariantów. Lepiej mieć jeden wspólny kod i w nim ogrywać różne elementy. Sam kiedyś stosowałem wersję z subdomeną m. i naprawdę jest to mało wygodne w deploymencie.

Powiedz w sumie najlepiej dlaczego chcesz dwie wersje strony i co to za content który chcesz serwować inaczej dla PC a inaczej dla mobile? Bo być może wystarczy najprostszy sposób z ograniem @media w CSS.

komentarz 20 stycznia 2019 przez nielotweb Bywalec (2,240 p.)

aaa, chciałem zrobić dwie wersję bo imo mi się to wydawało lepsze, bo zbytni bajzel troszkę jest przy rwd w plikach, a jak bym miał osobno plik do tego a plik do tego to porządek by był.

Ale jak mówisz że takie to skomplikowane to zostanę przy standardowym RWD :D

Dzięki za odpowiedź i rozpisanie się;p

komentarz 20 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Powiem tak - kiedyś dokładnie też tak myślałem :)

A teraz spójrz w przyszłość... za chwilę zechcesz dodać funkcjonalność X i okazuje się, że przy jednej wersji w zasadzie pewnie sprowadzi się to do dodatkowej regułuy @media w CSS, a przy dwóch stronach musisz to zaimplementowac dwa razy i co gorsza... w razie zmian/poprawek pamiętać o dwóch wersjach :)

Uwierz mi, przerabiałem to i jeśli nie masz jakiś mega customowych potrzeb dla dwóch wersji to idź w jedną.

komentarz 20 stycznia 2019 przez nielotweb Bywalec (2,240 p.)

Okej, tak zrobię. Dzięki wielkie :)

odpowiedź 20 stycznia 2019 przez Szycha Gaduła (4,650 p.)

Poczytaj np: o RWD, lub Bootstrapie. Znajomość CSS Grida i Flex-Boxa tez się przyda by osiągnąć efekt.

komentarz 20 stycznia 2019 przez Milesq Nałogowiec (32,020 p.)

Bootstrap? w dzisiejszych czasach O.o

generalnie odchodzi się od takich rozwiązań

komentarz 20 stycznia 2019 przez nielotweb Bywalec (2,240 p.)

To to ja wiem, ale chodzi mi, czy da się odpalić inne pliki gdy użytkownik jest na telefonie, odpalić stronę choćby z tym przedrostkiem w adresie 'm.strona.pl'.

A łopatologicznie: Użytkownik wchodzi na stronę na komputerze, strona mu się normalnie otwiera, i drugie wyjście: Użytkownik wchodzi na stronę na telefonie, i odpala mu się strona ( m.strona.pl ) mobilna strona, tzn. zupełnie inne pliki.

komentarz 20 stycznia 2019 przez nielotweb Bywalec (2,240 p.)

A jeszcze bardziej łopatologicznie: Wchodzę na komputerze odpala się strona: loremipsum.pl oraz plik komputer.html ( zawartosc strony ), Wchodzę na telefonie odpala się strona: m.loremipsum.pl oraz plik telefon.html.

1	komentarz 20 stycznia 2019 przez Milesq Nałogowiec (32,020 p.) da się .htacces, RewriteEngine on RewriteRule ^m\. mobilnaWersja/ w js'ie location.host.split('.')[0] i w zależności co tam siedzi ładujesz inną stronę (chociaż to bardziej w freamworkach jak Vue, Angular czy React)