Jak przekonwertować stronę na przeglądarkę mobilną

Urządzenia mobilne, takie jak smartfony i tablety, stanowią ponad połowę całego ruchu internetowego. Jednak według badań przeprowadzonych przez BrightEdge w 2014 r. Ponad jedna czwarta odwiedzanych przez ludzi stron internetowych nie jest poprawnie skonfigurowana dla tych urządzeń - kosztuje to średnio 68% utraty ruchu. Właściwa modyfikacja własnej strony internetowej dla przeglądarek mobilnych wymaga planowania i testowania. Samo kodowanie zwykle nie jest jednak dużym wyzwaniem, szczególnie jeśli znasz już CSS. Jeśli korzystasz z platformy takiej jak WordPress, nie musisz w ogóle znać kodu.

Wspólne platformy
Od pojawienia się iPhone'a, twórcy platform internetowych, takich jak WordPress, Joomla i Drupal mają zintegrowany projekt mobilny. Drupal, na przykład, zawiera oryginalne motywy mobilne. Każda z tych platform ma motywy mobilne, które mają uruchamiać się natychmiast po wykryciu dostępu do witryny przez przeglądarkę mobilną. Inne motywy są już przyjazne dla urządzeń mobilnych i będą reagować na gesty dotykowe tak, jak reagują na kliknięcia myszy, bez znaczącej zmiany projektu lub układu witryny na różnych urządzeniach.

Korzystanie z CSS i HTML
For Strony HTML, użyj kaskadowego arkusza stylów lub pliku CSS, aby zaprezentować mobilną wersję swoich stron, gdy są one dostępne przez przeglądarkę mobilną. Chociaż możliwe jest kodowanie CSS w celu wykrywania określonych urządzeń, bardziej powszechnym podejściem jest określanie układów na podstawie rozmiaru ekranu w pikselach. W razie potrzeby możesz mieć jeden styl dla dużych ekranów, jeden dla tabletów i jeden dla telefonów komórkowych. Korzystanie z CSS ma tę dodatkową zaletę, że wystarczy napisać kod tylko raz - w pliku CSS. Każda z Twoich stron wymaga tylko jednej linii kodu, aby narysować style z CSS.

Ekran dotykowy Funkcje interaktywne
Jeśli skonfigurowałeś stronę internetową jako interaktywną dla użytkowników korzystających z JavaScript lub HTML5 Ważne jest, abyś wiedział, jak Twoja strona zareaguje na zdarzenia dotykowe, nie tylko w przeglądarce mobilnej, ale także na coraz większej liczbie pulpitów z ekranem dotykowym. W większości przypadków należy rozważyć dodanie zdarzeń dotyku i gestów do kodu projektu. Na przykład w JQuery odpowiednikiem kliknięcia myszą na ekranie dotykowym jest zdarzenie z kranu, uruchamiane, gdy użytkownik dotyka, a następnie podnosi palec z ekranu. W zależności od strony możesz także wyłączyć domyślne ustawienia przeglądarki mobilnej, takie jak szczypanie, aby powiększyć lub przeciągnąć, aby przewinąć, używając zdarzeń „preventDefault”.

Testowanie i weryfikacja
Najlepszy sposób na przetestuj swoją nową stronę mobilną, aby użyć własnego urządzenia mobilnego. Sprawdź styl i układ strony, nawiguj za pomocą dotknięć i gestów, i przyjrzyj się uważnie obrazom, aby upewnić się, że wyglądają ostro. Możesz także użyć przeglądarki internetowej komputera, aby emulować wyświetlacz mobilny. Na przykład w przeglądarce Google Chrome naciśnij „F12”, aby otworzyć konsolę programisty. Kliknij ikonę „Ustawienia”, a następnie kliknij kartę „Emulacja”, aby wybrać urządzenie takie jak Google Nexus lub Apple iPad.

URL:https://pl.whycomputer.com/Internet/100301856.html