Podobnie jak większość innych, bardzo polecam korzystanie z WPTouch. Jednak jest zbudowany bardziej do obsługi blogów niż innych formatów witryn, więc wiem, że nie jest to panaceum na rozwiązania mobilne (prowadzę moje portfolio na WordPress, a także na moim blogu, a moje portfolio wygląda jak ****w WPTouch).
Rzuciłem więc okiem na kod, aby znaleźć odpowiednie części, których należy użyć do zreplikowania wykrywania przeglądarki mobilnej. Po pierwsze, jak wspomniał Jan Fabry, jest to lista agentów użytkownika przeglądarki mobilnej. WPTouch zawiera domyślną listę, ale umożliwia także dodawanie niestandardowych programów użytkownika z ustawieniem lub filtrem o nazwie wptouch_user_agents:
function bnc_wptouch_get_user_agents() {
$useragents = array(
"iPhone", // Apple iPhone
"iPod", // Apple iPod touch
"Android", // 1.5+ Android
"dream", // Pre 1.5 Android
"CUPCAKE", // 1.5+ Android
"blackberry9500", // Storm
"blackberry9530", // Storm
"blackberry9520", // Storm v2
"blackberry9550", // Storm v2
"blackberry9800", // Torch
"webOS", // Palm Pre Experimental
"incognito", // Other iPhone browser
"webmate", // Other iPhone browser
"s8000", // Samsung Dolphin browser
"bada" // Samsung Dolphin browser
);
$settings = bnc_wptouch_get_settings();
if ( isset( $settings['custom-user-agents'] ) ) {
foreach( $settings['custom-user-agents'] as $agent ) {
if ( !strlen( $agent ) ) continue;
$useragents[] = $agent;
}
}
asort( $useragents );
// WPtouch User Agent Filter
$useragents = apply_filters( 'wptouch_user_agents', $useragents );
return $useragents;
}
Jednak mięso wtyczki jest klasą:
class WPtouchPlugin {
var $applemobile;
var $desired_view;
var $output_started;
var $prowl_output;
var $prowl_success;
...
Konstruktor wtyczki ( function WPtouchPlugin()) najpierw dodaje akcję do przechwytywania w plugins_loadedcelu wykrycia klienta użytkownika przeglądarki mobilnej i ustawia wartość $applemobiletrue. Oto konkretna funkcja:
function detectAppleMobile($query = '') {
$container = $_SERVER['HTTP_USER_AGENT'];
$this->applemobile = false;
$useragents = bnc_wptouch_get_user_agents();
$devfile = compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
foreach ( $useragents as $useragent ) {
if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
$this->applemobile = true;
}
}
}
Teraz wtyczka wie, że używasz przeglądarki mobilnej (zgodnie z agentem użytkownika przeglądarki). Następną mięsną częścią wtyczki jest zestaw filtrów:
if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
add_filter( 'theme_root', array(&$this, 'theme_root') );
add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
add_filter( 'template', array(&$this, 'get_template') );
}
Każdy z tych filtrów wywołuje metodę, która sprawdza, czy $applemoblewartość true. Jeśli tak, to WordPress użyje mobilnego arkusza stylów, mobilnego motywu i mobilnego szablonu posta / strony zamiast domyślnych szablonów. Zasadniczo zastępujesz domyślne zachowanie WordPressa w oparciu o to, czy używana przeglądarka ma agenta użytkownika, który pasuje do Twojej listy „przeglądarek mobilnych”.
WPTouch obejmuje również możliwość wyłączenia motywu mobilnego - kiedy odwiedzasz witrynę WPTouch na iPhonie, u dołu znajduje się przycisk, który pozwala normalnie wyświetlić stronę. Możesz wziąć to pod uwagę, tworząc własne rozwiązanie.
Oświadczenie: Cały powyższy kod został skopiowany ze źródła dla WPTouch w wersji 1.9.19.4 i jest chroniony na licencji GPL. Jeśli użyjesz ponownie tego kodu, Twój system musi również być zgodny z warunkami GPL. Nie napisałem tego kodu.
Możesz przyjrzeć się, jak robi to bardzo popularna wtyczka WPtouch . Daje inny motyw dla urządzeń mobilnych „iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch i BlackBerry Storm / Torch” . W kodzie źródłowym widzę listę programów klienckich , to chyba klucz.
Inna wtyczka, WP-Wurfled , korzysta z obszernej bazy danych Wireless Universal Resource File . Ta stale aktualizowana baza danych urządzeń mobilnych zawiera również wiele informacji o możliwościach , dzięki czemu znasz rozdzielczość ekranu urządzenia po stronie serwera, czy obsługuje Flash, ...
template_redirectHak działanie jest często używany do załadowania niestandardowe tematy, jak to jest niemal ostatniej chwili przed rzeczywistym pliku szablonu jest wliczone w cenę (template_includejest to ostatni hak, ale to filtr).źródło
Ryzykując, że nie odpowiem na pytanie, radzę tego nie robić.
Używam urządzeń z iOS od miesięcy, a jedną z pierwszych rzeczy, które zrobiłem po zakupie iPada, było wymyślenie układu CSS, który zmieniał jego zachowanie w zależności od używanego urządzenia (i pierwotnie orientacji ekranu ).
W chwili pisania tego tekstu działa on na mojej stronie deweloperów (http://dev.semiologic.com/). Jeśli przetestujesz go na urządzeniu z systemem iOS, zauważysz, że układ przełącza się z kolumny z paskami bocznymi na iPadzie do kolumny z pojedynczą kolumną opartą na iPhonie. (Paski boczne są ułożone w dwóch kolumnach, a dolne pola w dwóch kolumnach poniżej). Efekt można odtworzyć za pomocą Safari, zmniejszając szerokość przeglądarki.
W każdym razie, chociaż programowanie było zabawne, w końcu przyszło mi do głowy, że przynajmniej na urządzeniach z iOS układ zoptymalizowany pod kątem urządzeń mobilnych pogorszył sytuację, a nie poprawił. Wbudowane powiększenie Safari dla urządzeń mobilnych sprawia, że dopóki główna kolumna ma szerokość 480 pikseli, witryna jest już zoptymalizowana pod kątem zastosowań mobilnych. Dodaj pasek boczny o szerokości 240px, aby uzyskać układ o szerokości 720px, a Twoja strona pasuje i wygląda świetnie we wszystkich:
500px + 250px działa również, jeśli wolisz mieć coś o łącznej wartości 750px, jeśli weźmiesz pod uwagę wbudowane powiększenie Safari. Strona nadal będzie wyglądać dobrze i będzie doskonale czytelna na iPhone'ach zarówno w trybie poziomym, jak i pionowym.
W każdym razie, wracając do pytania, testy wykazały, że jedyną rzeczą, której NIE powinieneś robić, jest użycie układu o elastycznej szerokości. (Nawiasem mówiąc, WP-touch zrobi to samo, chyba że się mylę.) Takie postępowanie prowadzi do nieoptymalnego powiększenia. Na iPadzie możesz powiększyć coś ograniczonego w kolumnie o szerokości 480 pikseli, co pozwala na większy rozmiar tekstu; coś, co „dostosowuje” się do szerokości ekranu zmusza do czytania małego tekstu lub przewijania w poziomie, jeśli jest zbyt małe, aby wygodnie go czytać ...
źródło
Proste: użyj
wp_is_mobile()do przetestowania - uruchomi siętruena wszystkich urządzeniach mobilnych (smartfony, tablety itp.).Aktualizacja
Proszę nie rób tego. Nie działa niezawodnie.
źródło
To jest naprawdę świetny skrypt, jeśli chcesz go dostosować, łatwy do zintegrowania z wordpress. http://detectmobilebrowsers.mobi/
Należy zauważyć, że większość użytkowników telefonów iPhone, Andriod lub telefonów komórkowych z natywną obsługą przeglądarki nie chce być automatycznie przekierowywana!
Jest to zła praktyka, daj im opcję poprzez link do wersji mobilnej ORAZ w wersji mobilnej daj im opcję powrotu do oryginalnej strony.
Powtarzam, nie przekierowuj automatycznie użytkowników, chyba że budujesz coś bardzo specyficznego dla urządzeń mobilnych lub masz ruch ze starszych telefonów bez obsługi natywnej przeglądarki (mało prawdopodobne).
źródło
Dodam alternatywne podejście.
Może chcesz stworzyć rękodzieło i dopracować cały styl i zachowanie zgodnie z bardzo konkretnymi potrzebami.
Niedawno musiałem: czy IE9 jedna rzecz, czy iPhone drugi, czy iPad trzeci itd. ... I użyłem klasy Browser.php Chrisa Schulda z doskonałymi wynikami.
Wymyślona funkcja i przykłady użycia:
źródło