• 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

0 głosów
71 wizyt
pytanie zadane 20 stycznia w HTML i CSS przez nielotweb Bywalec (2,020 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 przez Tomek Sochacki Mędrzec (183,830 p.)
wybrane 20 stycznia 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 przez nielotweb Bywalec (2,020 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 przez Tomek Sochacki Mędrzec (183,830 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 przez nielotweb Bywalec (2,020 p.)
Okej, tak zrobię. Dzięki wielkie :)
0 głosów
odpowiedź 20 stycznia przez Szycha Gaduła (4,630 p.)
Poczytaj np: o RWD, lub Bootstrapie. Znajomość CSS Grida i Flex-Boxa tez się przyda by osiągnąć efekt.
komentarz 20 stycznia przez Milesq Pasjonat (16,280 p.)
Bootstrap? w dzisiejszych czasach O.o

generalnie odchodzi się od takich rozwiązań
komentarz 20 stycznia przez nielotweb Bywalec (2,020 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 przez nielotweb Bywalec (2,020 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 przez Milesq Pasjonat (16,280 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 101 wizyt
0 głosów
2 odpowiedzi 114 wizyt
0 głosów
4 odpowiedzi 125 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez Piotr Jarema Użytkownik (530 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

64,868 zapytań

111,330 odpowiedzi

234,216 komentarzy

46,731 pasjonatów

Przeglądających: 203
Pasjonatów: 6 Gości: 197

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...