Meta viewport czy brak skalowania: dlaczego telefon ściska stronę
Najszybciej diagnozujesz problem w narzędziach deweloperskich: kliknij etykietę i sprawdź, który element otrzymuje fokus. Jeśli żaden, powiązanie nie istnieje. Jeśli inny niż oczekiwany, masz zdublowany identyfikator. Poprawka jest zwykle jednolinijkowa, ale bez sprawdzenia w przeglądarce łatwo wprowadzić kolejny błąd — na przykład zmienić for w jednym miejscu, a id zostawić w drugim.<br>
<br>
<br>
<br>
Warto też pamiętać o kolejności: znacznik viewport powinien być jednym z pierwszych w head, przed arkuszami stylów i skryptami. Przeglądarki mobilne odczytują go przy pierwszym renderowaniu, a późniejsze zmiany przez JavaScript bywają ignorowane lub powodują przeskok widoku. Jeden poprawny wpis wystarcza na całą witrynę, o ile znajduje się w każdym generowanym dokumencie. To najtańsza poprawka, jaka zmienia komfort czytania na telefonie.<br>
<br>
<br>
<br>
Jak zbudować sam link i co się dzieje po kliknięciu Odnośnik tworzysz w zwykłym znaczniku a, wpisując w href znak # i wartość id bez cudzysłowów: Przejdź do kontaktu. Po kliknięciu przeglądarka przewija stronę tak, aby element z tym id znalazł się na górze okna. Nie musisz dodawać JavaScriptu ani żadnej biblioteki. Jeśli chcesz, aby po skoku adres w pasku przeglądarki zawierał identyfikator sekcji, nic więcej nie rób — dzieje się to automatycznie.<br>
<br>
<br>
<br>
Zacznij od miejsca docelowego. W nagłówku lub kontenerze sekcji wstaw atrybut id, np. <br>
<br>
. Wartość nie może zawierać spacji, polskich znaków ani zaczynać się od cyfry — przeglądarki to tolerują różnie, a narzędzia do walidacji zgłoszą problem. Bezpiecznie jest używać małych liter, cyfr i myślników, np. id="cennik-uslug". Pamiętaj, że w całym dokumencie id musi być unikalne; dwa takie same identyfikatory to gwarancja, że link trafi w losowe miejsce.<br>
<br>
<br>
<br>
Na koniec sprawdź całość tak: wyłącz CSS i przeczytaj samą strukturę. Jeśli po nagłówkach da się zrozumieć, gdzie kończy się jedna samodzielna treść, a zaczyna druga, zagnieżdżenie jest poprawne. Jeśli nie — najprawdopodobniej zamieniłeś miejscami i albo użyłeś jednego z nich tam, gdzie wystarczył .<br>
<br>
<br>
<br>
Na koniec sprawdź całość w praktyce: kliknij każdy link, przewiń stronę w obie strony i powtórz test po zmianie kolejności sekcji. Kotwice są kruche, bo zależą od dwóch powiązanych wartości w różnych miejscach kodu — wystarczy poprawić jedno i zapomnieć o drugim, żeby link przestał prowadzić tam, gdzie powinien.<br>
<br>
<br>
<br>
Link do sekcji na tej samej stronie działa tylko wtedy, gdy dwa elementy mówią o tym samym: atrybut id celu i część adresu po znaku #. Jeśli nazwy się rozjeżdżają choćby o jedną literę, przeglądarka nie przewinie widoku i najczęściej nie pokaże żadnego błędu. Dlatego zamiast zgadywać, wypisz sobie najpierw wszystkie sekcje, do których chcesz skakać, i nadaj im krótkie, jednoznaczne identyfikatory.<br>
<br>
<br>
<br>
Link do pliku leżącego w innym katalogu działa tylko wtedy, gdy ścieżka jest poprawnie zbudowana względem miejsca, z którego odwołanie jest czytane. Najczęstszy błąd to traktowanie ścieżki względnej jak adresu bezwzględnego — czyli wpisanie czegoś w rodzaju images/logo.png w pliku, który sam leży w podkatalogu. Wtedy przeglądarka szuka folderu images wewnątrz tego podkatalogu, a nie w katalogu głównym projektu. Zanim cokolwiek poprawisz, ustal, gdzie fizycznie znajduje się plik źródłowy i plik docelowy.<br>
<br>
<br>
<br>
Jak to poskładać bez błędów Zacznij od szkieletu strony i nadawaj znaczniki od góry. Gdy tworzysz wpis, otwórz , a w środku wstaw z nagłówkiem dla każdej części. Gdy budujesz stronę zbierającą cudze treści, otwórz z nagłówkiem opisującym zbiór, a w środku umieść kilka . Każdy powinien mieć własny nagłówek najwyższego poziomu w swoim kontekście, a — też nagłówek, inaczej nie jest sekcją, tylko zwykłym pojemnikiem.<br>
<br>
<br>
<br>
Typowe pomyłki wynikają z mieszania separatorów. W systemach uniksowych działa ukośnik /, w systemie Windows historycznie używano odwrotnego \. W kodzie stron i arkuszy stylów używaj wyłącznie ukośnika zwykłego — odwrotny bywa interpretowany jako znak ucieczki i psuje całą ścieżkę. Uważaj też na wielkość liter: serwery produkcyjne często działają na systemach wrażliwych na wielkość, więc Logo.png i logo.png to dwa różne pliki. Lokalnie na Windows może działać, a po wdrożeniu link przestanie trafiać.<br>
<br>
<br>
<br>
Najprostszy sposób weryfikacji to otwarcie narzędzi deweloperskich w przeglądarce i sprawdzenie zakładki sieci. Zobaczysz tam pełny adres, pod który trafiło żądanie, oraz kod odpowiedzi. Jeśli pojawia się informacja o braku zasobu, porównaj ten adres z rzeczywistą strukturą katalogów. Przy plikach wczytywanych przez skrypty pamiętaj, że ścieżka bywa liczona względem pliku skryptu, a nie dokumentu HTML — to najczęstsze źródło błędów w projektach z podkatalogami. Gdy struktura jest głęboka, rozważ spłaszczenie katalogów albo konsekwentne stosowanie ścieżek bezwzględnych od korzenia witryny.