• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Osobna strona dla web jak i mobilki

VPS Starter Arubacloud
0 głosów
202 wizyt
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

+1 głos
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
1
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 :)
0 głosów
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)

Podobne pytania

0 głosów
2 odpowiedzi 481 wizyt
pytanie zadane 6 marca 2019 w HTML i CSS przez ricksanchez1943 Początkujący (260 p.)
0 głosów
4 odpowiedzi 391 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez Piotr Jarema Użytkownik (970 p.)
0 głosów
3 odpowiedzi 805 wizyt
pytanie zadane 14 listopada 2018 w HTML i CSS przez Uzytkowniczka Nowicjusz (220 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...