Sposób na sprawdzanie responsywności swojej strony

pytanie zadane 16 listopada 2018 w HTML i CSS przez eric19972 Użytkownik (590 p.)

Witam.

Projektuję proste strony internetowe w HTML/CSS/JS i oczywiście używam @media aby dostosowywać pod różne rozdzielczości. W chromie wciskam f12 i też niby wszystko ładnie działa - strona wydaje się być pięknie zoptymalizowana nawet pod tablety. Wchodzę jednak z jakiegoś starego tableta który mam w szufladzie i jest kompletny rozpierd*l. A wiadomo urządzeń na rynku jest tysiące - każdy z innym systemem operacyjnym, inną przeglądarką itd. Czy macie jakieś sprawdzone sposoby (najlepiej darmowe) na sprawdzanie responsywności swojej strony? Robię teraz stronę dla klienta i wydaje mi się być zrobiona poprawnie, ale wolę się upewnić, bo nie chcę dać komuś strony, gdzie ktos potem wejdzie z jakiegoś tableta i wszystko okaże się nie tak jak trzeba.

Pozdrawiam! :)

4 odpowiedzi

odpowiedź 16 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Ja szczerze polecam BrowserStock: https://www.browserstack.com/pricing

Jest płatne ale jak nie chcesz testów automatycnzych to za ok. 30dolarów na miecha masz naprawdę super narzędzie. Mozesz live testować wiele przeglądarek oraz wiele róznych urządzeń mobilych wraz z opcją testowania obsługi np. kamery w mobilkach itp. itd. Ja jestem bardzo zadowolony, zawsze jakiś większy build przed wrzuceniem na proda przeklikuję na paru przegladarkach, w tym na starszych IE, paru mobilkach itp. Czasami wychodzą różne krzaczki, których nie wykryjesz przy zwykłym resize w chromie.

odpowiedź 16 listopada 2018 przez pablop76 VIP (123,540 p.)

Jeszcze jedna blisk

komentarz 16 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.)

a jest tam obsluga starych przegladarek roznych oraz możliwość pracy z devtoolsami testowanego środowiska? pytam bo kiedys tez na to patrzylem ale wlasnie brak tych dwoch rzeczy sprawil że wybralem browserstock.

komentarz 16 listopada 2018 przez pablop76 VIP (123,540 p.)

Nie znam aż tak tej przeglądarki. Ma DevTools takie jak chrome, bo jest zbudowana na chromium. Posiada również własny inspektor. Integruje się z bug trackerami ( nie jestem w tym zorientowany). Co do starszych przeglądarek to wybiera się urządzenia nie przeglądarki, więc responsywność jest jak najbardziej do przetestowania. Obsługa starszych wersji chyba nie.

Może Lunascape się nada do takich testów?

komentarz 16 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.)

ale Lunascape to nie to samo co BS, to osobna przeglądarka. Ja robiłem małe rozeznanie i wydaje mi się, że BowerStack jest chyba jednak najlepszym narzędziem.

komentarz 19 listopada 2018 przez Comandeer Guru (606,240 p.)

Proste pytanie: czy Blisk obsługuje inne silniki przeglądarek (np. Samsung Web Browser lub WebKita)? Jak nie, to nie da się tam sprawdzić rzeczywistego wyglądu na konkretnych urządzeniach.

komentarz 19 listopada 2018 przez pablop76 VIP (123,540 p.)

Phones in Blisk Blisk delivers preinstalled phones of all needed viewports: from small iPhone 5s to large Google Pixel XL. Phones support touch event, landscape or portrait mode, have a propper screen resolution, device pixel ratio and user agent. The list of phones updates constantly. Supported OS: iOS and Android. Vendors: Apple, Google, LG, Samsung.

Więc się da.

komentarz 19 listopada 2018 przez Comandeer Guru (606,240 p.)

No ja tu nie widzę info o innych silnikach, tylko ustawieniu user agenta i odpowiedniej rozdziałce. A silnik Samsung Web Browser różni się od Chrome'a, mimo że obydwa projekty stoją na Chromium.

komentarz 19 listopada 2018 przez pablop76 VIP (123,540 p.)

Blisk oferuje fabrycznie zainstalowane telefony z wszystkimi wymaganymi widokami.

Rozumiem to tak, że Blisk serwuje widoki takie jak w oryginale.

komentarz 19 listopada 2018 przez Comandeer Guru (606,240 p.)

Nie, nie serwuje, bo KAŻÐA STRONA JEST OTWARTA W SILNIKU CHROMIUM. Zatem TE STRONY SĄ RENDEROWANE JAK W CHROMIUM, a nie tak, jak byłyby renderowane na swoich własnych silnikach. Szybki test – element, który jest różny w różnych przeglądarkach.

Blisk (iPhone XR):

Emulator iPhone XR w XCode Tools (czyli de facto oficjalnym narzędziu Apple do emulacji):

Chrome:

Wniosek chyba oczywisty.

odpowiedź 16 listopada 2018 przez Grzegorz :> Dyskutant (8,050 p.)

Rozpier*** jest może dla tego, że na tablecie jest zainstalowana przestarzała przeglądarka, która nie obsługuje nowoczesnych zastosowań. Podaj link do tej stronki, chętnie sam sprawdzę jak to u mnie wygląda :)

komentarz 16 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.)

może dla tego, że na tablecie jest zainstalowana przestarzała przeglądarka

fajnie rzucać takie słowa ale niestety w praktyce jak biznes Ci powie, że te 2% IE10/11 jest ważne to jest ważne i koniec kropka :) Czasami te 2% ruchu to całkiem ładne pieniądze dla firmy, także szczerze gratuluję, jeśli masz taki biznes w firmie, że nie wymusza na Tobie wspierania starych środowisk ale niestety nie zawsze tak jest.

komentarz 16 listopada 2018 przez arces Pasjonat (17,700 p.)

Wspieranie IE niżej niż 11 ma jeszcze sens? To nie jest już chyba nawet 2%. Pod IE11 jeszcze idzie coś wykonać w miarę małym nakładem pracy, ale poniżej tego to już jest po prostu masochizm, chyba że rzeczywiście klient się upiera, to wyjścia nie ma, ale wtedy już na początku wiesz, z czego nie możesz korzystać albo po prostu pisać osobne style pod starsze przeglądarki.

komentarz 16 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.)

roznie to bywa, czasem biznes stwierdzi ze jednak chce wesprzec ie10 bo ten odsetek ruchu generuje realne zyski i musisz juz jako programista wraz z ux designerem pomyslec jak to ograc aby zapewnic pewne ficzery ie i jednoczesnie nie pchać miliona polyfillli pozostalym... jak masz na apce parę milionow odslon dziennie to kazdy procent ruchu jest dla biznesu istotny :)

komentarz 16 listopada 2018 przez arces Pasjonat (17,700 p.)

Ale chyba nie ma za dużo takich apek :D Albo jestem w błędzie, wiadomo że ogromne corpo wspierają wszystko co się da, ale miałem raczej na myśli przeciętną firmę, ew. dużą ale nie międzynarodową :)

komentarz 16 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Ja pracuję obecnie w dość dużej firmie i uwierz mi, że te 1-2% IE10/11 to naprawę istotna ilość z punktu biznesowego i znaczna ilość userów generujących dochód...

Jak pisałem, wszystko zależy od decyzji biznesowych :) Programista jest niżej w tej całej hierarchii :)

komentarz 17 listopada 2018 przez spamator12 Nałogowiec (28,230 p.)

oczywiscie, ze przy biznesie liczy sie kazdy klient - tak wiec ie6 jak tylko panu sie zamarzy, pedzemmm. Tylko takie marzenia kosztuja. DUZO kosztuja bo czesto projekt trwa x2, a ze sie nie waliduje, ze kod jest dziurawy, ze tak naprawde szkodzi sie tym klientom i za duzo sensownego na takich gniotach nie da sie zrobic, to juz odpowiednia umowa i zadanie panskie w tym biznesie.

Jezeli chodzi o jakies tam sensowne rozwiazania z zakresu estetyki i 'bezpieczenstwa' schodzi sie do ie8. A ogolnie trend jest taki, ze ludzie maja kompy z odpowiednia moca wiec zmusza sie ich do aktualizacji browsera (to juz nie czasy gdzie pasek przegladarki byl wyzwaniem dla ksiegowej) aby bylo szybciej i bezpieczniej.

1	komentarz 17 listopada 2018 przez Tomek Sochacki Ekspert (227,490 p.) aż do IE8 to nie schodziłem jeszcze na prodzie, ale IE10/11 owszem i to też wymaga pewnej uwagi i dobrego otestowania.

komentarz 19 listopada 2018 przez eric19972 Użytkownik (590 p.)

@Grzegorz :>, adres mojej stronki to www.erykkryszewski.pl
Wygląda u mnie elegancko, menu jest rozsuwane itd. Na tablecie jednak sprawdziłem i "hamburger menu" było już otwarde, wszystko się rozjechało itd. Jak możesz to zerknij co i jak, bo nie chcę do CV wklejac portfolio, gdzie pracodawca je otworzy i mnie wyśmieje :)

komentarz 19 listopada 2018 przez Comandeer Guru (606,240 p.)

Ale chyba nie ma za dużo takich apek :D

Wspieramy quirks mode… Także ten…

odpowiedź 19 listopada 2018 przez eric19972 Użytkownik (590 p.)

BrowserStack pokazuje mi na tablecie, że na przeglądarce Chrome wszystko jest w porządku. Jeżeli wejdę jednak przez tabletową przeglądarkę, jakąś domyślną, to robi się śmietnik z mojej strony. Problem jest jednak w tym, że na tablecie moich rodziców zainstalowałem specjalnie Chroma, bo też myslałem, że to wina starej przeglądarki. Niemniej jednak na Chrome także był syf, a tutaj BrowserStack pokazuje, że na chromie powinno być elegancko. Stronę robiłem tez według różnych samouczków i dostosowałem te media query tak jak się tylko dało. Nie jestem specjalistą, ale no bez przesady.
Link: www.erykkryszewski.pl
Jak ktoś może to neich kuknie, pozdrawiam :)