5 rzeczy, które psują wyświetlanie strony na telefonie
Efekt widać najczęściej tam, gdzie spodziewasz się konkretnej przerwy. Akapit z marginesem dolnym 20 pikseli, po którym następuje lista z marginesem górnym 30 pikseli, daje przerwę 30 pikseli. Nagłówek z odstępem 40 pikseli nad i akapit z odstępem 15 pod nim dzieli od siebie 40 pikseli, więc wizualnie nagłówek przykleja się do poprzedniej treści. Zmniejszanie jednej z wartości nic nie da, dopóki druga jest większa.<br>
<br>
<br>
<br>
Uważaj na łączenie wielu źródeł stylów. Kolejność arkuszy, kolejność bloków w pliku i kolejność importów sumują się w jedną wspólną listę. Reguła z arkusza dołączonego później może nadpisać wszystko, co było wcześniej, nawet jeśli w tamtym pliku wyglądała niewinnie. Podobnie jest z regułami wstawionymi bezpośrednio w atrybucie stylu — one mają wyższy priorytet niż zwykłe reguły z arkusza, więc żadna późniejsza linia ich nie przebije, dopóki nie użyjesz odpowiedniego znacznika ważności.<br>
<br>
<br>
<br>
Poprawny zapis wygląda tak: . Wartość width=device-width mówi przeglądarce, żeby szerokość layoutu dopasowała się do szerokości ekranu w pikselach CSS. initial-scale=1 ustawia początkowe powiększenie na 100 procent, czyli bez automatycznego oddalania. Ta linia musi znaleźć się w sekcji head, przed jakimikolwiek arkuszami stylów i skryptami, które modyfikują układ. Jeśli wstawisz ją na końcu body, część przeglądarek może ją zignorować albo zastosować za późno, co objawia się mignięciem niewłaściwego widoku przy wczytywaniu.<br>
<br>
<br>
<br>
Kolejna typowa pomyłka to traktowanie fr jak procentów. Procenty odnoszą się do szerokości kontenera i nie uwzględniają odstępów w ten sam sposób, co może dawać inne wyniki przy tej samej liczbie kolumn. Jednostka fr jest elastyczna: jeśli jedna kolumna ma mniej treści, nie znaczy to, że będzie węższa — chyba że użyjesz minmax albo auto. Wartość auto w kolumnie sprawia, że szerokość zależy od zawartości, a fr rozdziela dopiero resztę. Świadome mieszanie tych dwóch podejść daje przewidywalne efekty.<br>
<br>
<br>
<br>
Kompresja stratna dzieli obraz na bloki, najczęściej 8 na 8 pikseli, i zapisuje je w postaci współczynników. Na gładkich powierzchniach błąd jest niewidoczny, ale przy ostrych krawędziach — konturze twarzy, krawędzi budynku, napisie na tle — sąsiadujące bloki dostają różne wartości i na styku powstaje schodek. To właśnie ten efekt, nazywany rozmyciem krawędzi lub ringingiem, widzisz jako drgającą obwódkę wokół kontrastowych elementów.<br>
<br>
<br>
<br>
Praktyczna zasada jest prosta: kompresję traktuj jako ostatni krok, zapisuj raz, a jeśli musisz poprawić plik, wróć do wersji roboczej. Kiedy artefakty już wystąpią, nie da się ich cofnąć bez ponownego przetworzenia całego zdjęcia. Receptą nie jest podbijanie ostrości, lecz ograniczenie liczby stratnych zapisów i świadome dobranie formatu do przeznaczenia obrazu.<br>
<br>
<br>
<br>
Kolor w CSS można zapisać na kilka sposobów. Nazwy słowne, zapis szesnastkowy, rgb() i hsl() to cztery najczęstsze warianty. Każdy z nich prowadzi do tego samego efektu: przeglądarka zamienia wartość na kanały czerwony, zielony i niebieski. Różnica tkwi w tym, jak łatwo ci odczytać intencję, jak szybko poprawić odcień i czy wartość przetrwa kopiowanie między plikami.<br>
<br>
<br>
<br>
Na koniec: po dodaniu znacznika nie wystarczy odświeżyć stronę w przeglądarce mobilnej. Część przeglądarek buforuje ustawienia viewportu przy pierwszym wejściu. Testuj w trybie prywatnym albo wyczyść dane strony. Warto też sprawdzić, czy motyw lub framework nie wstawia własnego meta viewport — wtedy w kodzie pojawią się dwa takie znaczniki i jeden nadpisze drugi, często w nieprzewidywalny sposób.<br>
<br>
<br>
<br>
Osobny problem to strony osadzane w ramkach. Jeśli witryna jest wyświetlana w iframe na innym serwisie, znacznik viewport z dokumentu nadrzędnego nie działa. Trzeba zadbać o to, żeby dokument wewnątrz ramki miał własny poprawny meta viewport. W przeciwnym razie telefon potraktuje całą ramkę jak szeroką stronę i znów pokaże miniature.<br>
<br>
<br>
<br>
Co jeszcze warto dodać, a czego unikać Do podstawowej wersji często dopisuje się maximum-scale=1 lub user-scalable=no. To błąd. Blokowanie powiększania łamie dostępność: osoby słabowidzące nie mogą przybliżyć sobie tekstu, a przeglądarki mobilne coraz częściej ignorują ten zakaz. Wystarczy width=device-width i initial-scale=1. Jeżeli strona ma stały układ o znanej szerokości, można użyć width=1024, ale to rozwiązanie tymczasowe — przy zmianie orientacji na poziomą układ się rozjedzie, a przy węższych ekranach pojawi się poziomy pasek przewijania.<br>
<br>
<br>
<br>
Jak ograniczyć widoczne artefakty na krawędziach Zacznij od tego, żeby zdjęcie zapisywać raz, na końcu obróbki, i w najwyższej jakości, jaką akceptuje docelowe zastosowanie. Jeśli plik ma trafić do druku, wybierz format bezstratny albo bardzo wysoką jakość. Przy publikacji w sieci zapisz kopię roboczą w formacie bezstratnym, a wersję końcową wygeneruj dopiero po wszystkich korektach. Unikaj zapisu pośredniego tylko po to, żeby coś sprawdzić — do podglądu używaj pliku roboczego, nie wynikowego. Kiedy musisz zmniejszyć rozdzielczość, zrób to przed kompresją, a nie po niej. Wyostrzanie wykonuj delikatnie i zawsze przed ostatnim zapisem, nie po nim. Jeśli krawędzie są bardzo kontrastowe, rozważ zapis w formacie, który nie dzieli obrazu na bloki, albo w formacie stratnym nowszej generacji.