Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]CSS hidden, Grafika z opcją hidden
furious_knight
post 9.07.2012, 13:09:02
Post #1





Grupa: Zarejestrowani
Postów: 43
Pomógł: 0
Dołączył: 18.12.2011

Ostrzeżenie: (0%)
-----


Witam,

Tworzę stronę w html5 i chcę żeby działała ona prawidłowo na kompach, tabletach i komórkach. Kożystam z jednego kodu HTML i 2 CSS(screen i mobile), niektóre zdjęcia (img src) w HTML są uprzedzone klasą która w screen nic nieznaczy, a w mobile wygląda tak:

.mobile{
visibility: hidden;
display: none;
}

zrobiłem tak żeby zmiejszyć ilość grafiki do wczytywania przez "powolne" komórki, ale zastanawiam się czy wogóle to co zrobiłem ma sens? czy czasem tel. nie wczyta tej całej grafiki a następnie jej nie ukryje??

Czy wytłumaczy mi ktoś w jaki sposób i w jakiej kolejności są elementy wczytywane i odczytywane z serwera do przeglądarki?
Go to the top of the page
+Quote Post
CuteOne
post 9.07.2012, 13:14:29
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----


Jeżeli masz zainstalowaną Operę lub FF za pomocą narzędzi programistycznych, możesz w łatwy sposób sprawdzić jakie elementy zostały pobrane z serwera. Twoje obawy są słuszne - przeglądarka pobierze grafikę a następnie za pomocą CSS ją schowa.

W tym wypadku najlepszy rozwiązaniem wydaje się tworzenie obrazów za pomocą JS (nawet zwykłe .inneHTML='<img src="">' powinno pomóc) lub utworzenie innego szablonu specjalnie no mobilki

Ten post edytował CuteOne 9.07.2012, 13:23:10
Go to the top of the page
+Quote Post
rocktech.pl
post 9.07.2012, 13:16:11
Post #3





Grupa: Zarejestrowani
Postów: 587
Pomógł: 131
Dołączył: 8.02.2010

Ostrzeżenie: (0%)
-----


Witam.

Zainteresuj się Media queries.

  1. @media (max-width: 767px) {
  2. .mobile {
  3. display: none !important;
  4. }
  5. }


--------------------
Despite the tons of examples and docs, mod_rewrite is voodoo. Damned cool voodoo, but still voodoo. --Brian Moore

I never go looking for a sucker. I look for a Champion and make a sucker of of him. --Amarillo Slim


Home-made : js-gui-classes | Accordion | Tabs | Carousel / php-sms-classes | Obsługa bramki SMS MultiInfo | Obsługa bramki SMS Mobiltek
Go to the top of the page
+Quote Post
furious_knight
post 9.07.2012, 14:05:58
Post #4





Grupa: Zarejestrowani
Postów: 43
Pomógł: 0
Dołączył: 18.12.2011

Ostrzeżenie: (0%)
-----


Dzięki za odpowiedzi:)

CuteOn, kombinowałem w podobny sposób żeby za pomocą Javascript wykonać poprostu warunki i tyle... ale znowu narzuca się pytanie czy wszystkie tel. komórkowe zrozumieją skrypt Javy? wydaje mi się (chyba) że java wykonuje skrypty już na stronie a nie na serwerze czyli urządzenie odczytujące musi sobie z tym poradzić... co sprowadza mnie do punktu wyjścia... No chyba że się mylę i javascript w HTML5 działa już na innych zasadach.

rocktech.pl

Wiem że MediaQueries są ważne i w wolnej chwili zacznę lektóre książki którą kupiłem HTML5 i CSS3 standardy przyszłości. Przeglądając ją widziałem że jest tam o tym sporo, ale w mojej stronce wykonałem kilka warunków za pomocą @media..... i moja stronka naprawde ładnie składa się przy każdej szerokości przeglądarki internetowej ale niezabardzo na chwilę obecną rozumiej co da mi użycie !impotant na mój problem z wersją mobilnąquestionmark.gif czy zapobiegnie to pobraniu grafiki z serwera przez komórkę?
Go to the top of the page
+Quote Post
CuteOne
post 9.07.2012, 15:07:53
Post #5





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----


Więc zrób dodatkowy szablon dla urządzeń mobilnych i problem z głowy
Go to the top of the page
+Quote Post
thek
post 9.07.2012, 20:07:36
Post #6





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D




Może zacznij od tego typu artykułów: http://www.cms.rk.edu.pl/w/p/tworzenie-str...dzenia-mobilne/ wink.gif


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 13:32