Jak włączyć funkcję smartfona na stronach internetowych

Korzystanie z Internetu za pośrednictwem urządzeń mobilnych rośnie od czasu premiery iPhone'a Apple. Ze względu na różne rozmiary ekranów urządzeń mobilnych i ich interfejsu dotykowego strony internetowe nie pojawiają się ani nie działają na urządzeniu mobilnym w taki sam sposób, w jaki pojawiają się lub działają na ekranie komputera. Aby utrzymać czytelnictwo, utwórz wersję swojego serwisu na smartfony za pomocą kaskadowych arkuszy stylów.

Ograniczenia przeglądania smartfonów

Przeglądanie na smartfona różni się od przeglądania na komputerze na dwa znaczące sposoby. Po pierwsze, dostępny rozmiar ekranu na smartfonie jest znacznie mniejszy niż na komputerze, co oznacza, że ​​niektóre witryny będą wyglądać na zagracone lub w niektórych przypadkach nieczytelne na smartfonie. Użytkownik smartfonu będzie musiał przewinąć w dół lub powiększyć stronę internetową, która jest zoptymalizowana pod kątem przeglądania komputera. Po drugie, smartfony reagują na kliknięcia dotykowe zamiast ruchu kursora, więc elementy strony internetowej zmieniające się w zależności od ruchu kursora mogą być problematyczne na smartfonie. Na przykład elementy, które zmieniają się, gdy kursor na nich się unosi, nie zachowują się w sposób pożądany na smartfonie, ponieważ najechanie nie robi nic na smartfonie. Również rozwijane menu mogą być problematyczne dla niektórych użytkowników smartfonów.

Rozmiary względne CSS

Jeśli zmieniasz rozmiar niektórych elementów w swojej witrynie, wystarczy zmienić plik CSS dla swojej witryny. Aby zapewnić czytelność smartfonu, zmień wymiary CSS i rozmiary czcionek na względne jednostki zamiast jednostek bezwzględnych. Na przykład szerokość i wysokość dowolnych określonych elementów powinna być podana w procentach zamiast pikseli. Spowoduje to zmianę rozmiaru elementów w oparciu o procent okna przeglądarki lub elementu nadrzędnego. W przypadku rozmiarów czcionek użyj ems zamiast pikseli. Jeden em jest równy bieżącemu rozmiarowi czcionki w pikselach. Dlatego dwa ems jest dwa razy większy od bieżącego rozmiaru czcionki i tak dalej. Zmiany te należy zapisać w oddzielnym pliku CSS.

Właściwości wyświetlania CSS

Aby całkowicie ukryć element w swojej witrynie, dodaj właściwość "display: none" do stylu CSS tego elementu. Właściwość "display: none" ukryje element całkowicie, tak że nie zajmie miejsca w oknie. Użyj tego na elementach takich jak menu rozwijane lub obrazy, które zajmują zbyt dużo miejsca na ekranie. Pozwoli to na to, aby inne elementy Twojej witryny układały się w oknie tak, jakby ukryty element nigdy tam nie był. Jeśli używasz tej modyfikacji, upewnij się, że wszelkie ważne informacje z ukrytego elementu są widoczne w innym miejscu na Twojej stronie.

Przekierowanie przeglądarki

Kiedy urządzenie uzyskuje dostęp do strony internetowej, najpierw odczytuje sekcję dokumentu HTML. Możesz utworzyć łącze do wielu arkuszy stylów CSS w sekcji dokumentu. Jeśli urządzenie mobilne wczyta twoją witrynę, przeglądarka załaduje arkusz stylów identyfikowany przez atrybut media = "handheld" zamiast domyślnego arkusza stylów. Możesz również przekierować przeglądarkę do różnych arkuszy stylów na podstawie rozmiaru ekranu. Może to być przydatne, jeśli chcesz inaczej zaprojektować swoją witrynę dla różnych urządzeń mobilnych. Zobacz Zasoby, aby zobaczyć listę popularnych wymiarów ekranu smartfona.

Alternatywny HTML

Jeśli drastycznie zmieniasz organizację i układ witryny poza nowy plik CSS, możesz chcieć utworzyć nowy plik HTML z pożądanymi zmianami. Jeśli utworzysz inny plik HTML, musisz przekierować przeglądarkę do nowego pliku HTML, jeśli użytkownik przegląda witrynę na smartfonie. Oprócz wykrycia przeglądarki mobilnej musisz zmodyfikować skrypt, aby przekierować na alternatywną stronę HTML. Zobacz Zasoby dotyczące linku do skryptów służących do wykrywania przeglądarki mobilnej.