Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Strona nie wyświetla się poprawnie na iPadach
Forum PHP.pl > Forum > Przedszkole
Lethys
Witam,

Tworzę stronę w tak zwanym paralax effect. Generanie strona już sama w sobie śmiga dobrze, ale problem się pojawił kiedy została włączona na iPadzie, gdzie po prostu się nie wyświetla poprawnie.
Nigdy nie optymalizowałem strony pod iPada, także nie bardzo wiem jak to zrobić. Szukałem info w necie, pytałem na stackoverflow ale nadal mam ten sam problem.

Problem polega na tym, że na iPadach nie wyświetlają się kafle z obrazkami, wyświetla się tylko pierwszy. Nawet jeżeli podmienie img src w kolejnych kaflach na ten który się wyświetla to nadal będzie się tylko pierwszy wyświetlał.


Pod iPady i tablety zrobiłem odzielny css:

  1. <link media="only screen and (device-width: 768px)" href="css/tablet.css" type= "text/css" rel="stylesheet" />


Tak wyglądają kafle z obrazkami:

  1. #kafelobrazintro {
  2. background: url(../images/introtablet.jpg) 50% 0 no-repeat;
  3. height: 1000px;
  4. margin: 0 auto;
  5. width: 100%;
  6. max-width: 1920px;
  7. position: relative;
  8. box-shadow: 0 0 50px rgba(0,0,0,0.8);
  9. overflow:hidden;
  10. }
  11.  
  12. #kafelobraz1 {
  13. background: url(../images/logomzblue.jpg) 50% 0 no-repeat;
  14. height: 1000px;
  15. margin: 0 auto;
  16. width: 100%;
  17. max-width: 1920px;
  18. position: relative;
  19. box-shadow: 0 0 50px rgba(0,0,0,0.8);
  20. overflow:hidden;
  21. }



Obrazki są w rozdzielczości 1024 x 614, zajmują < 200kb. Zmniejszałem je bo podobno iPad nie czyta img > 2MPX


Co poprawić, żeby wyświetlały się obrazki?
mar1aczi
Zainstaluj sobie np. do Firefoxa dodatek WebDeveloper. W nim masz "Rozmiar"->"Wyświetl układy responsywne". Dla większości mniejszych pozostaje Ci Poziomy pasek przewijania. Dla RWD możesz użyć np. http://getskeleton.com/ albo innego frameworka CSS.
Lethys
Cytat(mar1aczi @ 26.01.2014, 12:00:06 ) *
Zainstaluj sobie np. do Firefoxa dodatek WebDeveloper. W nim masz "Rozmiar"->"Wyświetl układy responsywne". Dla większości mniejszych pozostaje Ci Poziomy pasek przewijania. Dla RWD możesz użyć np. http://getskeleton.com/ albo innego frameworka CSS.



Ale w dodatkach, czy na stronach do sprawdzenie na innych rozdzielczosciach (np. http://ipadpeek.com/) nie pokazuje tak na prawde jak strona wyglada na iPadach, tylko pokazuje rozdzielczosc na jakiej dziala urzadzenie. iPad zupelnie inaczej wyswietla strone.

Co do frameworku, to troche na to zapozno, bo juz cala strona jest zrobiona, nie wiem jak teraz wrzucic jak w frameworka.

chodzi mi o drobne poprawki, na pewno da sie ro zrobic 2 linijakimi w cssie smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.