WebSite X5Help Center

 
Jacek A.
Jacek A.
User

Niewłaściwe wyświetlanie grafik na smartfonie  pl

Autor: Jacek A.
Visited 1494, Followers 1, Udostępniony 0  

Dzień dobry,
Niestety natknąłem się na kolejny problem, dla którego nie znalazłem rozwiązania w helpcenter...
Moja strona w wersji desktopowej wygląda tak, jak sobie założyłem że wyglądać ma.
Niestety na smartfonie pojawiło się kilka problemów, m.in. ten z wyświetlaniem grafik.
Stworzone przeze mnie ikony są jakby odrobinę przeskalowane, przez co tracą ostrość.
Dziwne jest to, że nie widzę powodu, dla którego grafiki w ogóle miałyby zmieniać rozmiar - powinny się spokojnie mieścić w szerokościach kolumn.
Marginesy wewnętrzne ustawione mam na 0.
W podglądzie programu wszystko wygląda dobrze, dopiero po na smartfonie wychodzą problemy.

Sprawa dotyczy np. zarówno logo w nagłówku, jak i zielonych ikon i czarnych ikon z tekstem już na stronie głównej: www.mugen.com.pl

Jak rozwiązać ten problem?

Posted on the
19 ODPOWIEDZI
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

Proszę załączyć zrzut ekranu z widocznym opisywanym problemem oraz podać szczegółowe informacje o urządzeniu oraz przeglądarce, na której występuje.

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Jacek A.
Jacek A.
User
Autor

Stronę testowałem na smartfonach z Androidem 5, 7, 8 z przeglądarką Chrome.
Zamieszczam zrzuty ekranu ze strony home i kontakt z zaznaczonymi na czerwono grafikami.
Na komputerze wszystkie grafiki są ostre, nawet po zwężeniu pola przeglądarki do minimalnej szerokości.

Dodam jeszcze, że logo ma przypisany w nagłówku i na przypiętym pasku rozmiar taki, jak plik graficzny, więc nic nie powinno się skalować.

Czytaj więcej
Posted on the from Jacek A.
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

U nas grafiki na Twojej stronie wyglądają tak samo, zarówno w przeglądarce na komputerze stacjonarnym jak i na telefonie z systemem Android 8.

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Jacek A.
Jacek A.
User
Autor

Proszę o przesłanie zrzutu ekranu.
Ciężko mi w to uwierzyć, ponieważ sprawdzałem na 3 urządzeniach z różnymi wersjami Androida. Na iphone również są zamazane.
Możliwe, że bez punktu odniesienia nie zauważyli Państwo różnicy.
Widać ją w szczególności na napisach na głównej stronie (w przesłanym wcześniej zrzucie ekranu - środkowa ramka na dole)

Czytaj więcej
Posted on the from Jacek A.
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

Opisywany problem najpewniej wynika z błędnie ustawionego rozmiaru obiektu "Obraz". Przykładowo, Twoje logo na głównej stronie ma rozmiar 215x86 pikseli, natomiast w projekcie ustawiony rozmiar to 222x122 pikseli. W przypadku paska przypiętego jest to odpowiednio 200x80 i 150x100.

Proszę zaznaczyć obiekt "Obraz" i wybrać z menu kontekstowego "Dopasuj do zawartości" oraz upewnić się, że rozmiar w menu "Położenie i rozmiar" jest taki sam jak rozmiar oryginalnego pliku. W przeciwnym wypadku obraz zostanie przeskalowany, zgodnie z ustawieniami "Tryb wyświetlania" w zakładce "Wyświetlanie" we właściwościach obiektu. Ewentualnie, proszę zmienić opcję "Metoda interpolacji" na "Dwusześcienna".

Jeżeli nie przyniesie to oczekiwanych efektów, proszę wykonać eksperyment i otworzyć w przeglądarce mobilnej sam obrazek logo i sprawdzić czy również wyświetla się nieprawidłowo:

https://www.mugen.com.pl/images/Mugen-logo-mini.png (pasekprzypięty)

https://www.mugen.com.pl/images/Mugen-logo-medium.png (główne logo)

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Jacek A.
Jacek A.
User
Autor

Dziękuję za odpowiedź.
W programie rozmiary grafik są ustawione tak jak wymiar pliku z logo.
Proszę o informację skąd pomysł, że przypisane są im rozmiary 222x122 i 150x80?
Pytam, ponieważ w projekcie mam takie grafiki, ale dotyczą one elementu ze strony "kontakt" i pliku, który nie wiem skąd się wziął, ale według pliku x5settings.php ma coś wspólnego z captcha.
Może coś się knoci w trakcie eksportu?

Zmiana metody interpolacji niestety nic nie dała.
Po otwarciu obrazka z linków rzeczywiście logo wyświetla się równie nieostre.
Zgłupiałem... grafiki na innych stronach wyświetlają się ostre jak żyleta!
Co to może oznaczać?

Jak pisałem wcześniej, stronę testowałem na smartfonach z Androidem 5, 7, 8 z przeglądarką Chrome, w międzyczasie jeszcze na Safari na iPhone. Chyba niemożliwe, żebym miał takiego pecha, że trafiałem akurat na urządzenia, z którymi było coś nie tak...

Może jeszcze inni użytkownicy helpcenter byliby skłonni wypowiedzieć się, czy na ich telefonach logo też nie jest tak ostre jak na komputerze...?

Czytaj więcej
Posted on the from Jacek A.
Piotr G.
Piotr G.
User

Jacek byłem (smartfonem) na stronie mugen.com.pl i w mojej ocenie jeśli logiem jest kwiatek obok (po lewej) napisu Mugen to jego ostrość jest OK. Zobacz sam 

Czytaj więcej
Posted on the from Piotr G.
Jacek A.
Jacek A.
User
Autor

@Piotr G., dziękuje za feedback.
Teraz jest OK, znalazłem żródło całego zamieszania i prowizoryczne rozwiązanie.
O wskazanie właściwego rozwiązania muszę prosić Promise lub osoby bieglejsze ode mnie w obsłudze programu.
Sprawa jest dosyć zagmatwana, ale postarm się ją przedstawić jak najłatwiej.

A więc krok, po kroku:

LOGO (nagłówek i pasek przypięty)
1.1 W pierwszej wersji strony miałem przygotowaną grafikę dokładnie w takim rozmiarze jak określiłem obraz w menu "Położenie i rozmiar" - 200x80.
Pomimo tego obraz po eksporcie był zamazany.
1.2 Zwiększyłem obrazek źródłowy do wymiaru 440x176 i wstawiłem go, zaznaczając w menu "Położenie i rozmiar" 200x80 mm. Nic to nie dało.
1.3 Zauważyłem, że przy eksporcie program zmienił rozdzielczość i nazwę mojej grafiki (dodał do niej "_sepl71n3"). Obrazek na laptopie wyświetlał się ostro, w smartfonie nie (wciąż nie wiem dlaczego).
1.4 Rozwiązaniem okazała się podmiana w folderze, już po eksporcie, pliku logo na oryginalny - o większej rozdzielczości (440x176).

OBRAZY DODANE DO POLA TEKSTU
Dokładnie ta sama sytuacja - powodem zamazanych grafik na smartfonach jest fakt, że program w czasie eksportu nie zostawia oryginalnej rozdzielczości pliku, a zmniejsza ją!
Muszę po eksporcie projektu podmieniać grafiki, żeby wyglądały dobrze

ZWYŁKE OBRAZY
To samo co powyżej.

OBRAZY W ELEMENCIE ANIMATED IMAGE
Nie znalazłem rozwiązania dla tego problemu, obrazy wciąż są nieostre, a potrzebuję je na stronie głównej!

W części przypadków udało mi się więc jako tako uratować sytuację, ale chyba wszyscy się ze mną zgodzą, że nie tak to powinno się odbywać. To paranoja, żebym musiał po wyeksportowaniu projektu podmieniać w nim wszystkie grafiki.

Co mogę zrobić, żeby z poziomu programu wgrać obraz i mieć go w takiej samej jakości w wyeksportowanym folderze?
(Wiem, że pytanie brzmi głupio, ale musiałem je zadać)

Czytaj więcej
Posted on the from Jacek A.
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

Rozmiary grafik sprawdziliśmy w projekcie, który nam przesłałeś - wymiary obiektów nie zgadzały się z rozmiarami grafiki wejściowej i w takim wypadku program dokonuje skalowania.

Jedyne co jeszcze możemy zasugerować w tej sprawie, to zastosowanie plików graficzny w formacie JPG.

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Jacek A.
Jacek A.
User
Autor

Niestety nie jest tak, jak to opisaliście.
Rozumiem, że swoją tezę bazujecie na tym, co znajdziecie w kodzie strony, ale pisałem już wcześniej, że rozdzielczość pliku i logo ustawionego w programie były identyczne: 215x86 pikseli dla nagłówka i 200x80 dla paska przypiętego.

Nie mam pojęcia skąd wzięły się w kodzie wartości 222x122 i 150x100 - pytałem o to kilka postów wcześniej, ale nie otrzymałem odpowiedzi. Ja grafik o takich rozdzielczościach nie posiadałem i nie ustawiałem w programie takich wartości.
Z tego co widzę program w czasie eksportu dokonuje jakieś niepotrzebne operacje jak np. zmiana rozdzielczości, zmiana nazw plików wyjściowych.

To jedna rzecz.
Druga - dlaczego grafiki się rozmazują tylko w wersji mobilnej?

Nie znalazłem w Waszym poście rozwiązania problemów, o których pisałem:

1. Rozmazane logo (coś tu działamy wspólnie, ale sprawa nie jest jeszcze zamknięta)
2. Rozmazane grafiki dodane do pola tekstu
3. Rozmazane grafiki dodane jako kafelka obraz
4. Rozmazane grafiki w elemencie Animated Image.
Jeśli to coś pomoże, chętnie prześlę najnowszą wersję projektu.

Myślę, że takie rozwiązanie będzie najklarowniejsze, bo jak na dłoni będziecie widzieli czy rzeczywiście niewłaściwie ustawiłem coś w programie. Z powyższymi uwagami się nie mogę niestety zgodzić.

Czytaj więcej
Posted on the from Jacek A.
Jacek A.
Jacek A.
User
Autor

Spędziłem kolejne godziny nad projektem i zmieniłem w nim co nieco na zasadzie podmiany grafik po eksporcie projektu.
Oryginał strony domowej skopiowałem i można go znaleźć pod adresem:
https://www.mugen.com.pl/test.html
To na tej jednej stronie skupiają się właściwie wszystkie błędy, o których pisałem powyżej.
@Promise, liczę na to że ustosunkujecie się do każdego z czterech punktów.
Z góry dziękuję za poświęcony czas :)

Czytaj więcej
Posted on the from Jacek A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ESNajlepszy Użytkownik miesiąca PT

Ciao,

Powiększenie przeglądarki 100% ....? ... Ctrl + 0 (zero)
Oryginalne LOGO jest większe niż jego położenie na stronie, a następnie zmieniane;
Powinien być zaprojektowany z uwzględnieniem środków odpowiednich do celu, aby uniknąć zmniejszenia rozmiaru.

(IT) Browser zoom 100% ....?... Ctrl+0 (zero)
Il LOGO originale è di misure maggiori rispetto alla sua posizione nella pagina, e quindi viene ridimensionato;
andrebbe progettato con misure adatte allo scopo per evitare ridimensionamenti.

na stronie: 200 x 80 pikseli 

 >> K >> 

oryginał: 440 x 176 pikseli 

.

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Jacek A.
Jacek A.
User
Autor

@KolAsim, jest dokładnie tak, jak piszesz, ALE wygląda to tak dlatego, że każde inne rozwiązanie skutkowało rozmazaniem grafiki. Poza tym problem dotyczy smartfona, nie wersji desktopowej.
Jak pisałem 4 posty wyżej, przy użyciu grafiki o rozmiarze 200x80 logo było z jakiegoś powodu rozmazane.
Dopiero podmiana plików graficznych po eksporcie projektu na takie o znacznie wyższej rozdzieczości rozwiązywało problem.

Dotyczy to WSZYSTKICH grafik na stronie, które nie są tłem. Paranoja!

Czytaj więcej
Posted on the from Jacek A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ESNajlepszy Użytkownik miesiąca PT

Jeśli klikniesz prawym przyciskiem myszy na swoje LOGO, zauważysz, że we wszystkich rozdzielczościach logo jest zmieniane przez przeglądarkę (*), a nie przez program, i używany jest oryginalny plik.
(*) ... za to, jak próbowałem to zrozumieć, aby tego uniknąć i zamiast tego użyć obrazów miar odpowiednich do tego celu, jak w moim przykładzie, który nie zaciera się ...
  ... lub jeszcze lepiej wykorzystaj format wektorowy SVG.
... dla szybkiego pomysłu zobacz >> tutaj ... (plik tymczasowy!)


(IT) Se tu clicchi con il destro del mouse sul tuo LOGO, noterai che in tutte le risoluzioni il logo viene ridimensionato dal browser (*) e non dal programma, e viene usato il file originale.
(*) ... per come ho cercato di far capire, da evitare, ed usare invece immagini di misure adatte allo scopo, come nel mio esempio che non sfoca...
...oppure ed ancor meglio usare il formato vettoriale SVG.
... per una rapida idea, vedi >> qui ... (file temporaneo!)

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

Załączamy zrzut ekranu z Twojego projektu, obrazujący nieprawidłowe ustawienia rozmiaru obiektu zawierającego grafikę, która przez to zostaje przeskalowana.

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Jacek A.
Jacek A.
User
Autor

To musi być zrzut z wczesnej wersji projektu.
Od dawna juzustawienia są jak w załączniku.
Przesyłam Państwu projekt w najnowszej wersji, bo bez niego chyba nie uda się nam chyba wyjaśnić przyczyny tych zagadkowych nieprawidłowości.

Czytaj więcej
Posted on the from Jacek A.
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

Na Twoim zrzucie widać, że obiekt z logo ma rozmiar 215x86 pikseli natomiast grafika na serwerze ma 440x176 pikseli: https://www.mugen.com.pl/images/Mugen-logo_idqatjv7.png

W takim wypadku następuje skalowanie grafiki wykonywane po stronie przeglądarki i w przypadku grafik PNG na systemach Android występują problemy z jakością. Zgodnie z naszymi wcześniejszymi sugestiami, proszę dostosować rozmiar grafiki do rozmiaru obiektu i skorzystać z innego formatu.

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Jacek A.
Jacek A.
User
Autor

@Promise, proszęo przeczytanie całej dyskusji i odpowiedź dopiero wtedy.
Zamieszczone tu przez Was wskazania powtarzają się i nie mają się nijak do faktycznej sytuacji. Grafika o rozmiarze 440x176 pikseli rozwiązuje problem, a nie stwarza go. Wszystko opisałem wyczerpująco w poście zaczynającym sięod "@Piotr G., dziękuje za feedback.".
Poza tym cały czas odpowiadacie tylko na problem z logiem.
Podkreślam ponownie, że dotyczy on WSZYSTKICH GRAFIK, które nie są tłem.

Czytaj więcej
Posted on the from Jacek A.
Promise SA
Promise SA
Icm Partner

Witaj Jacek,

Proszę zastosować się do naszej sugestii i skorzystać z innego formatu, np. JPG.

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA