Najprostszym sposobem na ukrycie elementów strony dla wersji mobilnych jest deklaracja zadana w pliku z zewnętrznymi arkuszami stylów. Brzmi to może skomplikowanie ale chodzi o zwyczajną edycję pliku style.css i dopisanie określonego stylu dla mniejszych ekranów. Co jeśli to rozwiązanie nie działa w Twoim szablonie? W tym minikursie przeprowadzę Cię zarówno przez podstawową edycji szablonu w wersji mobilnej jak i przez fragment kodu PHP, który sprawdza czy ktoś korzysta ze strony przez tablet lub smartfon i na podstawie tego wyświetla (bądź nie) określony fragment kodu.

Jak sprawdzić czy mój szablon ma przygotowaną wersję mobilną?

Nie ma prostszego sposobu jak wejście na stronę przez telefon i samodzielne sprawdzenie jak się prezentuje w przeglądarce w wersji mobilnej. Patrząc na tablecie warto też obrócić urządzenie i sprawdzić jak zachowa się strona przy większej rozdzielczości.

Jeśli nie mamy telefonu/tabletu pod ręką można zawsze skorzystać z opcji „przywróć w dół” czyli przeciwieństwa maksymalizacji (ikonka obok iksa w prawym górnym rogu w Windowsie), a następnie zmniejszyć okno tak aby miało rozmiar połowy ekranu albo mniejszy. Pozwoli Ci to zasymulować sytuację w której oglądasz stronę na małym ekranie.

Jak dodać style CSS  dla urządzenia mobilnego?

Najprostszym ze sposobów jest wejście do style.css i dopisanie po zamknięciu ostatniego } pod sam koniec pliku:

@media only screen and (max-width : 640px) {
.element-do-ukrycia { display: none; }
}

Teraz po kolei. Pierwsza linia pozwala określić jakiej szerokości ekranu dotyczy poniższy fragment kodu CSS. W naszym przypadku mówimy o ekranie o szerokości 640 pikseli i mniejszej. Teraz spójrz na linię 2. Zamiast „element-do-ukrycia” powinieneś wpisać nazwę elementu, który zamierzasz ukryć.

Jeśli nie wiesz jak zbadać element strony tak aby poznać jego nazwę, skorzystaj z kursu „Jak sprawdzić nazwę selektora konkretnego elementu strony przy pomocy standardowych narzędzi przeglądarki?”.

Takich linijek jak druga może być znacznie więcej, pamiętaj tylko aby umieścić je pomiędzy otwarciem klamry z linii 1 i zamknięciem z 3.

Jeśli CSS nie daje rady…

Ostatnio stanąłem przed skomplikowanym zadaniem. Chciałem umieścić na stronie przycisk „obserwuj na Facebooku” ale tylko dla wersji desktopowych. W wersji mobilnej tego przycisku miało nie być. Niestety wszystkie próby ukrycia go w CSSie spełzły na niczym. Mam podejrzenie, że skoro przycisk jest embedowany na stronę to nie jest go tak łatwo ukryć. Z pomocą przyszedł kod PHP i rozpoznawanie urządzeń mobilnych. Wystarczyło wkleić:

<?php
 $useragent = $_SERVER['HTTP_USER_AGENT'];
 if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
 {
?>

Pod fragmentem – dokładnie w tym miejscu – umieść kod który chcesz ukryć w wersji mobilnej strony. Zakończ go i wklej zamknięcie do tego warunku:

<?php
  }
?>

To wszystko. Kod pomiędzy otwarciem, a zamknięciem nie będzie widoczny w HTMLu a co za tym idzie nie będzie się wyświetlał na urządzeniach mobilnych.

Jeśli chcesz zrobić coś innego, mianowicie pokazać fragment kodu widoczny tylko na urządzeniach mobilnych, wtedy wystarczy że zrobisz to samo ale zamiast fragmentu z linii 3:

 if(!preg_match 

napiszesz:

 if(preg_match 

Wykrzyknik w kodzie PHP jest negacją więc jeśli wyłączysz ją, wtedy element pomiędzy nawiasami będzie widoczny na smartfonach i tabletach.