Jak zoptymalizować stronę internetową do przeglądania na urządzeniach mobilnych
Konfigurowanie widoku strony na różnych urządzeniach w obszarze widocznym
Widoczny obszar to ustawienie określające, które bloki mogą lub nie mogą być wyświetlane na określonych typach urządzeń. Możesz dostosować ten parametr w panelu Ustawienia dowolnego bloku.
Dlaczego możesz go potrzebować i jak to działa
Jeśli blok wygląda dobrze na komputerze, ale nie tak dobrze na urządzeniach mobilnych, możesz ustawić widoczność bloku na 980px lub więcej. W ten sposób blok stanie się zorientowany na komputery stacjonarne i nie pojawi się na urządzeniach mobilnych.
Następnie skopiuj blok i zoptymalizuj go do wyświetlania na telefonie komórkowym, dostosowując jego ustawienia (co może wymagać zmiany obrazu, czcionki itp.). Ustaw widoczność bloku na "0-980px". W rezultacie otrzymasz mobilną wersję bloku.
W końcu ci, którzy uzyskują dostęp do Twojej witryny z komputera, zobaczą wersję na komputery, a użytkownicy mobilni wersję mobilną.
Widoczność bloku to parametr, który można znaleźć w panelu Ustawienia dowolnego bloku i dostosować tak, aby blok był wyświetlany lub nie pojawiał się na urządzeniach o określonej rozdzielczości ekranu. Na przykład niektóre bloki nie wyglądają dobrze na tabletach, a inne na telefonach komórkowych.
Jeśli blok wygląda dobrze na komputerze, ale nie tak dobrze na urządzeniach mobilnych, możesz ustawić widoczność bloku na 980px lub więcej. W ten sposób blok stanie się zorientowany na komputery stacjonarne i nie pojawi się na urządzeniach mobilnych.
Następnie skopiuj blok i zoptymalizuj go do wyświetlania na telefonie komórkowym, dostosowując jego ustawienia (co może wymagać zmiany obrazu, czcionki itp.). Ustaw widoczność bloku na "0-980px". W rezultacie otrzymasz mobilną wersję bloku.
W końcu ci, którzy uzyskują dostęp do Twojej witryny z komputera, zobaczą wersję na komputery, a użytkownicy mobilni wersję mobilną.
Widoczność bloku to parametr, który można znaleźć w panelu Ustawienia dowolnego bloku i dostosować tak, aby blok był wyświetlany lub nie pojawiał się na urządzeniach o określonej rozdzielczości ekranu. Na przykład niektóre bloki nie wyglądają dobrze na tabletach, a inne na telefonach komórkowych.
Przykład
Mamy okładkę, która świetnie wygląda na pulpicie, tekst wyrównany do lewej, a główny obiekt do prawej. Teraz dostosujmy go tak, aby dobrze wyglądał również na urządzeniach mobilnych.
Jak widzimy, okładka zostaje przycięta na urządzeniach mobilnych i nie wygląda zbyt dobrze.
Aby zapobiec wyświetlaniu go na urządzeniach mobilnych, przejdź do panelu Ustawienia bloku okładki i ustaw widoczność bloku na "> 980px". Teraz użytkownicy mobilni już go nie zobaczą.
Skopiuj blok.
Dostosuj blok dla wersji mobilnej — zmień wyrównanie zdjęcia i tekstu.
Teraz, gdy ustawiliśmy widoczność bloku na "≤ 980px", nie pojawi się on na urządzeniach z ekranami szerszymi niż 980px.
Gotowy! Teraz okładka jest wyświetlana inaczej w zależności od szerokości ekranu.
Przykłady szerokości ekranu dla różnych urządzeń:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
