Identyczna strona na każdym urządzeniu

Wszystko o HTML, XHTML, XML, CSS.
szymon_89
Posty: 6
Rejestracja: 14 lis 2014, 17:11:44
Reputacja: 0
Płeć: Niewybrana
User Agent: Chrome Windows

Identyczna strona na każdym urządzeniu

Postautor: szymon_89 » 16 mar 2015, 09:21:41

Witam, mam wykonać stronę, a wszystko mi się rozjeżdża. Strona to pewna bajeczka, historyjka, która ma w sobie kilka obrazków nałożonych na większy obrazek i kilka wyrazów. Nie może być paska przewijania prawego więc musi mieścić się w wymiarach okna przeglądarki. Pytanie brzmi. Jak zrobić, aby identycznie strona wyglądała na każdym urządzeniu. Owszem. Są do tego media queries w CSS3 i użycie procentowo wszystkego. Znalazłem nawet rozwiązanie użycia do czcionki(najgorzej się rozjeżdża) font-size: wartości "vw" i"vh", ciekawie ale jednak gdy chcę pomniejszyć przeglądarkę(nie rozdzielczość), czyli zwężyć albo pomniejszyć od wysokości, to się rozpiepsza na dobre. Więc tych media queries trzeba by było setki :( conajmniej 1500 linii kodu CSS3 media queries. Macie może jakieś rady ? Czasu też mało na domiar złego :P Dziękuję z góry za zainteresowanie i pomoc :)
Awatar użytkownika
4zywioly
Posty: 528
Rejestracja: 26 kwie 2011, 16:33:42
Reputacja: 13
Strona na CBA.pl: 4zywioly.c0.pl
Płeć: Niewybrana
User Agent: Chrome Windows 1366x768
Kontakt:

Re: Identyczna strona na każdym urządzeniu

Postautor: 4zywioly » 19 mar 2015, 09:05:55

Koniecznie musi się składać z mniejszych obrazków?

Jeśli tak no to background-size:100%; obrazki tych samych wymiarów z przezroczystym polem i tekst w divach z wartościami procentowymi.

Jeśli nie to może flash?
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Reputacja: 50
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Identyczna strona na każdym urządzeniu

Postautor: piwo » 19 mar 2015, 19:20:39

@szymon_89

media w css nie są do tego... zresztą samo css nie jest... zresztą co tam...
klasy, struktury, obiekty, funkcje i cała reszta jest stworzona właśnie po to aby NIE pisać czegoś 1500 razy.
...więc tu już by była pała.

szymon_89 WroteColonPytanie brzmi. Jak zrobić, aby identycznie strona wyglądała na każdym urządzeniu.


Wydaje mi się że źle zrozumiałeś pytanie (a diabeł tkwi w szczegółach), względnie zostało ono błędnie zadane. Ale załóżmy że pytanie jest właśnie takie i traktujemy to dosłownie czyli że ma identycznie (?! no weź...) wyglądać, w różnych rozdzielczościach to jedyne sensowne jest skalowanie.

Jeśli nie jest określone jakich technologi mamy użyć (a nie jest), to bierzemy pierwsze z brzegu, i ...to da się zmieścić w jednej linii jquery.

np. $(window).resize(function() { cośtam }); z użyciem CSS transform: scale(x,y);
albo jeszcze prościej było by użyć fit.js dzięki czemu odpada problem czy skalować do szerokości czy do pionu.

Ale suma sumarum podejrzewam że pała i tak będzie bo pewnie pytanie było tak zadane aby wymusić użycie "czegoś co było uczone" (a nie, jquery czyli "sprytnie, sprytnie, ...ale źle!!!") w ramach testu "czy dobrze weszło to co było uczone", i albo zostało źle zadane albo co gorsza źle zrozumiane...

Jeżeli z kolei chodziło o użycie media query, to powszechnie używa się (czytaj: ja czasem używam) połączenia stałych szerokości z fluidem i media query do małych modyfikacji pojedynczych elementów, bo nie chodzi o skalowanie wszystkiego do mikro rozmiarów na ekranie np. szerokości 300px tak że nic nie będzie widoczne ani "klikalne" ale "się zmieści".

czyli

szerokość ekranu 1280px
xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 33%............coś 33%............coś 33%...........menu Xpx.... = fajnie

szerokość ekranu 1024px
xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 33%............coś 33%............coś 33%...........menu Xpx.... = też fajnie

szerokość ekranu 800px
xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 33%............coś 33%............coś 33%...........menu Xpx.... = już nie fajnie bo te 3 pierwsze będą za wąskie dlatego fajnie by było zrobić 2 kolumny - więc media query zmieniamy tylko 1 parametr - coś 50% i w rozdzielczości 800px mamy

szerokość ekranu 800px
xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
coś 50%...............coś 50%...............menu Xpx.... = fajnie
xxxxxxxxxxxxxxxxxx = a to wskoczyło do następnej linii, pięknie.
coś 50%

to wszystko jeszcze owijamy w diva ze stałą szerokością i auto marginesem i też zmieniamy skokowo media querem w zależności od 800, 1024, 1280 itd.
tylko jedna zmiana w jednym elemencie width z 33% na 50% i w wraperze i jak ładnie :) Gdzie i po co 1500 linii...

Jeszcze raz (i to pewnie będzie oceniane) - w zmieszczeniu czegoś w różnych rozdzielczościach (ekranach) nie chodzi o przeskalowanie ale o "zmieszczenie / rozmieszczenie" treści w sensowny sposób, gdzie na malutkim ekranie, przykładowo klawisze nie tylko nie są mniejsze ale wprost większe aby można je było swobodnie kliknąć paluchem.
{$signature}
szymon_89
Posty: 6
Rejestracja: 14 lis 2014, 17:11:44
Reputacja: 0
Płeć: Niewybrana
User Agent: Chrome Windows 1920x1080

Re: Identyczna strona na każdym urządzeniu

Postautor: szymon_89 » 22 mar 2015, 12:21:51

Dzięki za wyczerpującą odpowiedź. Poradziłem sobie już sam z problemem. Tekst najbardziej się rozjeżdżał więc dałem go w obrazek. Wszystkie obrazki mają rodzica o klasie: position: relative, a dzieci: position: absolute i ustawione rozmiary, a także height i wszystko w procentach. Trochę punktów kontrolnych musiałem użyć ale niewiele, bo od FULL HD rozpoczynałem pisanie a punkty w HD+,HD, a na urządzenia mobilne ciutkę inny obrazek i mniej pod obrazków, bo nie było takiej potrzeby. Dużo mówi artykuł: http://webroad.pl/html5-css3/643-media- ... rzykladach, szczególnie fajna funkcja to: @media all and (orientation:portrait), bo w pionie w urządzeniach było by małe, a tak dla piony jest znowu inny obrazek :) w miarę fajnie się skaluje, szefowa zadowolona :) Nie jestem uczniem, tylko nie dawno zacząłem naukę i zarazem pracę i muszę szybko nadganiać, jestem samoukiem i spędzam dziennie ponad 10h czasu na douczaniu się, niestety weekendy też :) Dziękuję za artykuł, bo wyczerpująca odpowiedź, bo i w nim są ciekawe rzeczy :)
mariusz33332
Posty: 1
Rejestracja: 03 lip 2019, 08:02:53
Reputacja: 0
Płeć: Niewybrana
User Agent: Chrome Windows 1280x960

Identyczna strona na każdym urządzeniu

Postautor: mariusz33332 » 03 lip 2019, 08:11:51

Wielka szkoda że od dawna nikt nic nie napisał w tym wątku.Mnie to się po prostu w ogóle nie podoba.

_________________________________________________
rolety wewnetrzne częstochowa
tanierolety
Posty: 3
Rejestracja: 15 paź 2019, 13:55:58
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1920x1080
Kontakt:

Identyczna strona na każdym urządzeniu

Postautor: tanierolety » 15 paź 2019, 13:58:55

mariusz33332 WroteColonŹródło posta Wielka szkoda że od dawna nikt nic nie napisał w tym wątku.Mnie to się po prostu w ogóle nie podoba.

_________________________________________________
rolety wewnętrzne łódź


Yyy.. co Ci się konkretniej nie podoba? :D
Awatar użytkownika
endriu888
Obsługa CBA
Posty: 1373
Rejestracja: 23 sty 2012, 21:02:33
Reputacja: 0
Strona na CBA.pl: katalogfirm.c0.pl
Płeć: Niewybrana
User Agent: 1024x768
Kontakt:

Identyczna strona na każdym urządzeniu

Postautor: endriu888 » 20 paź 2019, 09:32:17

:D
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość