Niewłaściwe wyświetlanie grafik na smartfonie
Автор: Jacek A.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?
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
Автор
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ć.
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
Автор
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)
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
Автор
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...?
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
Автор
@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ć)
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
Автор
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ć.
Автор
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 :)
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
.
Автор
@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!
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!)
.
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
Автор
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.
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
Автор
@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.
Witaj Jacek,
Proszę zastosować się do naszej sugestii i skorzystać z innego formatu, np. JPG.
Pozdrawiamy