GoldenLine
Zaloguj się

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Stworzyłem szablon który działa świetnie na Mozilli i Chrome, ale na telefonie ucina kawałek strony z lewej. Czy jest to spowodowane jakimś konkretnym parametrem czy może opera mini i samsungowe przeglądarki są po prostu lipne?

Cała treść jest umieszczona w głównym div-ie
{position: absolute; top: 20px; left: 50%; margin-left: -500px; width: 1000px; z-index: 2;}
a pod nim jest div z tłem
{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-image: url('../images/tlo.png'); background-repeat: repeat-y; background-position: center center; z-index: 1;}
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Przeglądarki na telefonach i problemy

Ten fragment z lewej ucina przez ten ujemny margines. Zamiast centrować główny kontener poprzez ujemny margines i ustawienie left na 50% polecam Ci takie rozwiązanie:
body {

 text-align: center;

}



body > div {

 margin: 20px auto 0;

 width: 1000px;

 text-align: left;

}

Centrowanie tekstu w body to fix bodajże dla IE7 bo bez tego nie centruje kontenera.

EDIT: Możesz też spróbować dorzucić html { width: 1000px; } ale to tylko luźna myśl i wcale nie musi zadziałać ;)Marcin Gościcki edytował(a) ten post dnia 02.07.12 o godzinie 14:49
Link do wypowiedziLink
Mateusz Kocz

Mateusz Kocz JavaScript
Programmer &
Front-end Developer

Temat: Przeglądarki na telefonach i problemy

Dawid Zając:
[…]

Zrób, jak napisał Marcin, dorzucając jeszcze do body > div {position: relative; z-index: 2} żeby tło nie wyskoczyło ponad treść, albo—jeżeli zależy ci na absolutnym pozycjonwaniu—użyj kodu poniżej:

{position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; width: 1000px; z-index: 2;}

To jednak tylko doraźna pomoc. Jeżeli używasz szerokości rzędu 1000 pikseli, używasz absolutnego i sztywnego pozycjonowania, to tak naprawdę nie robisz strony pod telefony.Mateusz Kocz edytował(a) ten post dnia 02.07.12 o godzinie 14:50
Link do wypowiedziLink
Roch Szatan

Roch Szatan As

Temat: Przeglądarki na telefonach i problemy

j.w.

i napisz inne style na telefon
http://mobile.smashingmagazine.com/2010/07/19/how-to-u...
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Przeglądarki na telefonach i problemy

Mateusz Kocz:
...
albo—jeżeli zależy ci na absolutnym pozycjonwaniu—użyj kodu poniżej:

{position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; width: 1000px; z-index: 2;}

Tylko, że straci wtedy wyśrodkowanie strony.

EDIT: Tak jak koledzy wyżej zalecam zapoznanie się z responsive web design.Marcin Gościcki edytował(a) ten post dnia 02.07.12 o godzinie 14:55
Link do wypowiedziLink
Mateusz Kocz

Mateusz Kocz JavaScript
Programmer &
Front-end Developer

Temat: Przeglądarki na telefonach i problemy

Marcin Gościcki:
Tylko, że straci wtedy wyśrodkowanie strony..

Nie straci.Mateusz Kocz edytował(a) ten post dnia 02.07.12 o godzinie 15:04
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Przeglądarki na telefonach i problemy

Mateusz Kocz:
Nie straci.

Rzeczywiście, mój błąd. Tylko w IE7 traci centrowanie przy tym sposobie.
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Mateusz Kocz:

To jednak tylko doraźna pomoc. Jeżeli używasz szerokości rzędu 1000 pikseli, używasz absolutnego i sztywnego pozycjonowania, to tak naprawdę nie robisz strony pod telefony.

Generalnie szablon jest przeznaczony dla komputerów ale chciałem zrobić na tyle porządnie aby działał prawidłowo na typowych telefonach :)
Nie rozumiem tylko czym grozi absolutne pozycjonowanie w urządzeniach mobilnych?
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Dawid Zając:
Generalnie szablon jest przeznaczony dla komputerów ale chciałem zrobić na tyle porządnie aby działał prawidłowo na typowych telefonach :)
Nie rozumiem tylko czym grozi absolutne pozycjonowanie w urządzeniach mobilnych?

Mała uwaga do Ciebie jako projektanta witryny - tak na przyszłość ;)


Obrazek


Obrazek


Poza tym co rozumiesz pod pojęciem "typowe telefony" oraz "urządzenia mobilne", bo temat jest naprawdę baaardzo pojemny...

Wiąże się z tym kwestia wsparcia danej przeglądarki dla CSS (vide "absolutne pozycjonowanie"), toteż najpierw zakreśl sobie zakres urządzeń na jakich strona ma jako tako wyglądać, potem przetestuj to co zrobiłeś i wyciągnij wnioski. Powodzenia!
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Wiem na czym się przegląda internet, koszt dopasowania do wszystkich urządzeń jest ogromny w porównaniu do zwykłego komputera chociażby z faktu mocy obliczeniowej dla JS, ja w tym przypadku poprzestałem na Mozilli, Chrome i większości telefonów właśnie z powodu budżetu.
Ciekawi mnie tylko w czym konkretnie tkwi problem "absolute".
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Przeglądarki na telefonach i problemy

Dawid Zając:
Wiem na czym się przegląda internet, koszt dopasowania do wszystkich urządzeń jest ogromny w porównaniu do zwykłego komputera chociażby z faktu mocy obliczeniowej dla JS, ja w tym przypadku poprzestałem na Mozilli, Chrome i większości telefonów właśnie z powodu budżetu.

Skoro założyłeś ten temat to wydaje mi się, że jesteś webdeveloperem, więc Twój koszt to poświęcony czas - oczywiście zdaję sobie sprawę, że zlecenia bywają różne i nie zawsze warto ten czas poświęcić. Resoponisive Web Design nie oznacza budowania całkiem nowego szablonu dla mobile - ba, nawet nie oznacza budowania całego nowego css-a - a efekty niedużym nakładem pracy mogą być naprawdę ciekawe i ułatwić przeglądanie i obsługę strony na urządzeniach mobilnych.

Chrome i Mozilla (rozumiem, że masz na myśli FireFox'a) to trochę mało - dorzuć do tego IE (możesz od 8 w górę - siódemka ma już niewiele ponad 1% w PL) i Operę która wciąż się jakoś w Polsce trzyma.

Aż boję się zobaczyć Twoje skrypty JS skoro martwisz się mocą obliczeniową...

Ciekawi mnie tylko w czym konkretnie tkwi problem "absolute".
Absolute to nie tylko problem mobile'a. Zmniejsz okno przeglądarki to zobaczysz, że na PC też Ci ucina lewą cześć strony przez ten ujemny margines. Absolute powinno się używać w określonych sytuacjach - centrowanie taką sytuacją nie jest...

EDIT: Źródło danych statystycznych: http://ranking.pl/pl/rankings/web-browsers.htmlMarcin Gościcki edytował(a) ten post dnia 03.07.12 o godzinie 01:54
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Z IE 8+ też mam zgodność, a jesli chodzi o % przeglądarek to warto zauważyć że mówią one tylko o komputerach a nie internautach, przeważnie gdy siedzi się w robocie przy firmowym komputerze z IE nie włazi się na typowe zjadacze czasu ani nie szuka hydralika do pękniętej rury w domu. Popularność IE wynika też z faktu że gdy ktoś kupuje pierwszy komputer to ma to windowsowe szajstwo i nie potrafi zainstalować niczego innego.

Marcin Gościcki:

Aż boję się zobaczyć Twoje skrypty JS skoro martwisz się mocą obliczeniową...

Byle slideshow potrafi się ciąć na telefonie więc to nie kwestia tego co ja napiszę ale użycia frameworków i dodania bajerów multimedialnych. Jak wiemy JS jest jezykiem obiektowym i kilkaset megaherców nie wystarczy aby rozwinąć skrzydła.
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Przeglądarki na telefonach i problemy

Dawid Zając:
a jesli chodzi o % przeglądarek to warto zauważyć że mówią one tylko o komputerach a nie internautach
Nie rozumiem co masz na myśli. Ranking mówi z jakich przeglądarek internauci łączą się ze stronami biorącymi udział w badaniu gemiusTraffic. W zestawieniu są zarówno przeglądarki desktopowe jak i mobilne. Cytat ze strony rankingu:


Ranking przeglądarek używanych przez internautów łączących się z obszaru Polski z polskimi witrynami. Ranking jest tworzony na podstawie liczby odsłon stron uwzględnionych w badaniu gemiusTraffic.

przeważnie gdy siedzi się w robocie przy firmowym komputerze z IE nie włazi się na typowe zjadacze czasu ani nie szuka hydralika do pękniętej rury w domu.
Brzmi jak ciche marzenie dyrektora firmy :)
Popularność IE wynika też z faktu że gdy ktoś kupuje pierwszy komputer to ma to windowsowe szajstwo i nie potrafi zainstalować niczego innego.
Z tym akurat mogę się zgodzić - sam znam kilka starszych osób które ograniczają całe obcowanie z internetem do kilku określonych witryn. Ale są jeszcze ludzie którzy korzystają z IE (często którejś ze starszych wersji) bo nie mają alternatywy - często zdarza się to w korporacjach, w miejscach publicznych (np. biblioteki) no i są ludzie którzy używają IE nie dlatego, że nie potrafią zainstalować innej przeglądarki ale nie bardzo wiedzą po co bo nie widzą różnicy.
Byle slideshow potrafi się ciąć na telefonie więc to nie kwestia tego co ja napiszę ale użycia frameworków i dodania bajerów multimedialnych. Jak wiemy JS jest jezykiem obiektowym i kilkaset megaherców nie wystarczy aby rozwinąć skrzydła.
No i tu przychodzi z pomocą RWD - slideshow na urządzeniu mobilnym (chodzi mi bardziej o smartphone'a niż tablet) to chybiony pomysł. W css-ie dla urządzenia mobilnego ustawiasz jakiś inny wygląd a w JS sprawdzasz czy masz do czynienia z mobile'm - jeśli tak to nie podłączasz swojego skryptu i po krzyku :)
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Marcin Gościcki:
przeważnie gdy siedzi się w robocie przy firmowym komputerze z IE nie włazi się na typowe zjadacze czasu ani nie szuka hydralika do pękniętej rury w domu.
Brzmi jak ciche marzenie dyrektora firmy :)

napisałem "przeważnie" czytaj ze zrozumieniem :)

W css-ie dla urządzenia mobilnego ustawiasz jakiś inny wygląd a w JS sprawdzasz czy masz do czynienia z mobile'm - jeśli tak to nie podłączasz swojego skryptu i po krzyku :)

Tylko że ja muszę umieścić kilkanaście zdjęć jako dokumentację a robienie tego bez slideshow jest jeszcze gorszym pomysłem.
Link do wypowiedziLink
Mateusz Kocz

Mateusz Kocz JavaScript
Programmer &
Front-end Developer

Temat: Przeglądarki na telefonach i problemy

Dawid Zając:
Ciekawi mnie tylko w czym konkretnie tkwi problem "absolute".

Absolutnie spozycjonowane elementy wylatują z normalnego biegu dokumentu. Czasami nawet tak mocno, że przeglądarki głupieją, wyrzucają je za obszar przeglądania (vide początkowy problem) i nie wiedzą, że powinny dać możliwość przewijania do tego obszaru. Do tego pozycjonowanie absolutne jest zbyt mało elastyczne (właściwie w ogóle nie jest). Nie dostosuje się do możliwości urządzenia. Element z właściwością top:300px może wyglądać dobrze i będzie czytelny na desktopach, ale na niektórych telefonach to co najmniej jedno przewinięcie, a do tego zostaje nieelegancka pusta przestrzeń.
Dawid Zając:
Tylko że ja muszę umieścić kilkanaście zdjęć jako dokumentację a robienie
tego bez slideshow jest jeszcze gorszym pomysłem.

Zobacz, czy gotowe rozwiązania nie załatwią problemu. Testowałem pierwszy na tej liście (Flexslider). Ma wsparcie dla machnięcia palcem przy przełączaniu kolejnych/poprzednich slajdów. Fajna sprawa.
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Przeglądarki na telefonach i problemy

Eval is evil, IE is evil, absolute is evil...
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Adam Pawliczek:
Eval is evil, IE is evil, absolute is evil...

Google is evil, M$ is evil, Apple is evil, internets is evil, wyłącz TV idź czytać "Nad Niemnem" (albo "Łyska z pokładu Idy") :DPiotr L. edytował(a) ten post dnia 03.07.12 o godzinie 22:21
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Piotrze gdy ludzie to czytali przynajmniej umieli myśleć nie to co dzisiaj.
Generalnie IE is evil, absolute to broń masowego rażenia, jak użyjesz z głową odniesiesz sukces, jak bez głowy to sam się pogrążysz, ogólnie dla mnie CSS is evil, czy naprawdę nie można było wymyślić nic stabilniejszego?

@Mateusz Kocz
Nawet nie próbowałem pisać własnego slideshow przy ogromie darmowych rozwiązań :)
Link do wypowiedziLink

konto usunięte

Temat: Przeglądarki na telefonach i problemy

Dawid Zając:
Piotrze gdy ludzie to czytali przynajmniej umieli myśleć nie to co dzisiaj.

True, true...
Generalnie IE is evil, absolute to broń masowego rażenia, jak użyjesz z głową odniesiesz sukces, jak bez głowy to sam się pogrążysz, ogólnie dla mnie CSS is evil, czy naprawdę nie można było wymyślić nic stabilniejszego?

Pewnie można było... Zaproponuj jakąś alternatywę, proszę... A póki co: jak się nie ma co się lubi, to się lubi co się ma... Najłatwiej jest zawsze narzekać, że IE evil (bo "nie chce mi się/nie wiem jak poprawić IE bugi"), bo CSS evil ("bo mi się tutaj źle float zrobił")...
@Mateusz Kocz
Nawet nie próbowałem pisać własnego slideshow przy ogromie darmowych rozwiązań :)Piotr L. edytował(a) ten post dnia 04.07.12 o godzinie 00:04
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Przeglądarki na telefonach i problemy

Piotr L.:
(...)
Najłatwiej jest zawsze narzekać, że IE evil (bo "nie chce mi się/nie wiem jak poprawić IE bugi")
(...)

Nie dlatego, że "nie chce mi się/nie wiem jak poprawić IE bugi", tylko dlatego, że te bugi w ogóle są i chcąc nie chcąc w pewnym stopniu wydłużają proces tworzenia strony. Ważniejszą sprawą dla mnie jest to, że IE blokuje nowocześniejsze-lepsze rozwiązania. IE8 (udział IE7 w Polsce spadł do 1% więc w wielu przypadkach można już sobie tą przeglądarkę "odpuścić") nie obsługuje m.in. rgba, skalowania tła, border radius'ów, wielu pseudoselektorów (np. :last-child, :nth-child, :first-of-type) nie wspominając o animacjach css, które działają teraz tylko (AFAIK) tylko na WebKit'cie. - Podsumowując: IE is evil.

EDIT: HTML5 & CSS3 Support - http://www.findmebyip.com/litmusMarcin Gościcki edytował(a) ten post dnia 04.07.12 o godzinie 08:37
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj