Przejdź do treści

Nagłówek i treść - HTML

Strona mobilna <link media>

W jaki sposób wskazać link do wersji mobilnej (smartfon, tablet) serwisu?

<head>
	<link rel="alternate" media="media" href="adres">
</head>
gdzie jako "media" podaje się typ(y) mediów alternatywnych albo zapytanie mediów. Natomiast zamiast "adres" wpisuje się bezwzględny adres strony (rozpoczynający się od http:// lub https://), która stanowi odpowiednik bieżącego dokumentu specjalnie przystosowany na podane urządzenia.

W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu nawigacyjne lepiej przystosowane do ekranów dotykowych. Dzięki powyższemu znacznikowi możemy w prosty sposób wskazać taką wersję, na wypadek gdyby użytkownik przypadkowo trafił na stronę przeznaczoną dla tradycyjnych komputerów z dużym ekranem.

Ze znacznika <link media> korzysta wyszukiwarka Google. Dzięki temu w wynikach może się pojawić wersja strony odpowiednia dla urządzenia, z którego w danej chwili korzysta użytkownik.

Przykład <link media>

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">

Pytania i odpowiedzi

Co to jest mobilna wersja strony?

Mobilna wersja strony to dostosowana do urządzeń mobilnych wersja witryny internetowej, zoptymalizowana pod kątem mniejszych ekranów i interakcji dotykowych. Zazwyczaj jest bardziej ergonomiczna dla użytkowników korzystających z smartfonów czy tabletów.

Jak dostosować stronę do urządzeń mobilnych HTML?

Aby dostosować stronę do urządzeń mobilnych w HTML, można użyć meta tagu viewport. Przykład: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Ten tag umożliwia przeglądarce odpowiednie skalowanie i dostosowanie widoku do szerokości ekranu urządzenia.

Jak zrobić stronę mobilną?

Aby zrobić stronę mobilną, można użyć znacznika <link> z atrybutem media="..." do wskazania adresu strony dedykowanej urządzeniom mobilnym. Przykład: <link rel="alternate" media="only screen and (max-width: 600px)" href="https://m.example.com/">. Ten link informuje przeglądarkę o istnieniu alternatywnej wersji strony przeznaczonej dla urządzeń o mniejszych ekranach.

Jak sprawdzić wygląd strony na urządzeniach mobilnych?

Aby sprawdzić wygląd strony na urządzeniach mobilnych, można skorzystać z narzędzi deweloperskich przeglądarki, takich jak tryb responsywności. Wchodząc w inspekcję elementu (Ctrl+Shift+I), można przełączyć się w tryb responsywności (ikona ze smartfonem) i dostosować widok do różnych rozmiarów ekranów.

Jak przełączyć przeglądarkę w tryb mobilny?

Aby przełączyć przeglądarkę w tryb mobilny, można użyć narzędzi deweloperskich lub dodatków. W przypadku narzędzi deweloperskich (Ctrl+Shift+I), wchodząc w tryb responsywności (ikona ze smartfonem), można wybrać konkretny model urządzenia. Dodatkowo, istnieją rozszerzenia, takie jak "User-Agent Switcher," które umożliwiają emulację różnych urządzeń.

Komentarze

Zobacz więcej komentarzy

Facebook