Làm thế nào để phát hiện các thiết bị di động và trình bày cho chúng một chủ đề cụ thể?


31

Tôi muốn tạo một phiên bản sửa đổi mới của chủ đề của mình (kiểm tra hồ sơ của tôi nếu cần) để trình bày cho khách truy cập nếu tôi phát hiện ra rằng họ đang truy cập trang web từ một thiết bị cầm tay, như iPhone, Android, v.v.

  1. Làm cách nào để phát hiện nếu yêu cầu đến từ thiết bị / trình duyệt di động?
  2. Làm thế nào tôi có thể tải và trình bày cho họ một chủ đề chuyên dụng?

Thông tin thêm : Chủ đề của tôi không trôi chảy. Nó có chiều rộng cố định khoảng 976px (nội dung 676px + phần còn lại là thanh bên trái). Tôi không muốn cách mạng hóa chủ đề nhưng tôi cảm thấy nó lớn cho điện thoại 320x480 và 800x480. Có lẽ tôi sẽ loại bỏ thanh bên hoặc ít nhất là di chuyển nó sang phải và thực hiện các điều chỉnh nhỏ khác.

Câu trả lời:


19

Giống như hầu hết những người khác, tôi khuyên bạn nên sử dụng WPTouch. Tuy nhiên, nó được xây dựng để hỗ trợ blog nhiều hơn các định dạng trang web khác, vì vậy tôi biết đó không phải là liều thuốc của các giải pháp di động (tôi chạy danh mục đầu tư của mình trên WordPress cũng như blog của mình và danh mục đầu tư của tôi trông giống như ****trong WPTouch).

Vì vậy, tôi đã xem mã để tìm các phần có liên quan mà bạn cần sử dụng để sao chép phát hiện trình duyệt di động. Thứ nhất, như được đề cập bởi Jan Fabry, là một danh sách các tác nhân người dùng trình duyệt di động. WPTouch bao gồm một danh sách mặc định, nhưng cũng cho phép bạn thêm các tác nhân người dùng tùy chỉnh với một cài đặt hoặc với một bộ lọc được gọi là 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;
}

Phần cốt lõi của plugin là một lớp:

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

Trình xây dựng của plugin ( function WPtouchPlugin()) trước tiên thêm một hành động vào plugins_loadedhook để phát hiện tác nhân người dùng của trình duyệt di động và được đặt $applemobilethành đúng. Đây là chức năng cụ thể:

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;
        }       
    }
}

Bây giờ plugin biết bạn đang sử dụng trình duyệt di động (theo tác nhân người dùng của trình duyệt). Phần tiếp theo của plugin là một bộ các bộ lọc:

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') );       
}

Mỗi bộ lọc này gọi một phương thức kiểm tra xem có $applemobleđược đặt thành đúng hay không . Nếu đúng như vậy, thì WordPress sẽ sử dụng biểu định kiểu di động, chủ đề di động của bạn và mẫu bài đăng / trang di động thay vì mẫu mặc định cho chủ đề của bạn. Về cơ bản, bạn đang ghi đè hành vi mặc định của WordPress dựa trên việc trình duyệt đang được sử dụng có tác nhân người dùng phù hợp với danh sách "trình duyệt di động" của bạn hay không.

WPTouch cũng bao gồm khả năng tắt chủ đề di động - khi bạn truy cập trang web WPTouch trên iPhone, có một nút ở phía dưới cho phép bạn xem trang web bình thường. Bạn có thể muốn xem xét điều này khi bạn xây dựng giải pháp của riêng bạn.

Tuyên bố miễn trừ trách nhiệm: Tất cả các mã trên đã được sao chép ra khỏi nguồn cho phiên bản WPTouch 1.9.19.4 và được bảo vệ theo GPL. Nếu bạn sử dụng lại mã, hệ thống của bạn cũng phải tuân thủ các điều khoản của GPL. Tôi đã không viết mã này.


Đây có phải là danh sách UA mặc định? Không có Opera Mini hay Opera Mobile? Lạ thật.
fuxia

Đó là danh sách UA nằm ngoài mã nguồn ... tuy nhiên, chỉ cần nhớ rằng, WPTouch 2.0 là một plugin cao cấp bạn phải mua từ BraveNewCode . Tôi chưa nhìn vào nguồn cho điều đó, vì vậy nó có thể có một danh sách UA được cập nhật.
EAMann

8

Bạn có thể muốn xem cách plugin WPtouch rất phổ biến thực hiện việc này. Nó mang đến một chủ đề khác cho "thiết bị di động iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch và BlackBerry Storm / Torch" . Tôi thấy một danh sách các tác nhân người dùng trong mã nguồn của họ , đó có lẽ là chìa khóa.

Một plugin khác, WP-Wurfled , sử dụng cơ sở dữ liệu Tệp tài nguyên phổ quát không dây mở rộng . Cơ sở dữ liệu thiết bị di động được cập nhật liên tục này cũng chứa nhiều thông tin về khả năng , vì vậy bạn biết phía máy chủ độ phân giải màn hình của thiết bị, cho dù nó có hỗ trợ Flash, ...

Các template_redirectmóc hành động thường được sử dụng để tải theme tùy biến, vì nó gần như là giây phút cuối cùng trước khi một mẫu thực tập tin được bao gồm ( template_includeđược móc cuối cùng, nhưng đó là một bộ lọc).


7

Có nguy cơ không trả lời câu hỏi, tôi khuyên bạn không nên làm như vậy.

Tôi đã sử dụng các thiết bị iOS trong nhiều tháng và một trong những điều đầu tiên tôi làm khi mua iPad là cố gắng đưa ra bố cục CSS thay đổi hành vi của nó dựa trên thiết bị được sử dụng (và, ban đầu, hướng màn hình ).

Tại thời điểm viết bài, nó đang chạy trên trang dev của tôi (http://dev.semiologic.com/). Nếu bạn kiểm tra nó trên thiết bị iOS, bạn sẽ lưu ý rằng bố cục sẽ chuyển từ một cột có thanh bên trên iPad, sang một cột có một cột duy nhất dựa trên iPhone. (Các thanh bên được bố trí thành hai cột và các hộp phía dưới được bố trí ở hai cột bên dưới.) Bạn có thể tái tạo hiệu ứng bằng Safari, bằng cách giảm độ rộng của trình duyệt.

Dù sao, cũng thú vị như khi lập trình, cuối cùng tôi cũng nhận ra rằng, ít nhất là trên các thiết bị iOS, bố cục được tối ưu hóa cho thiết bị di động khiến mọi thứ trở nên tồi tệ hơn, không tốt hơn. Thu phóng tích hợp của Safari di động sao cho, miễn là cột chính của bạn rộng 480px, trang web của bạn đã được tối ưu hóa để sử dụng cho thiết bị di động. Thêm một thanh bên rộng 240px cho bố cục rộng 720px, và trang web của bạn phù hợp và trông tuyệt vời trong tất cả:

  • 1024x768 (phong cảnh iPad)
  • 768x1024 (chân dung iPad)
  • 800x600 (người dùng có thị lực kém)
  • 480x320 (ngang iPhone)
  • 320x480 (chân dung iPhone, với tính năng tự động phóng to)

500px + 250px cũng hoạt động nếu bạn muốn có một cái gì đó có tổng cộng 750px, nếu bạn sử dụng tính năng thu phóng tích hợp của thiết bị di động Safari. Trang web vẫn sẽ trông ổn và hoàn toàn có thể đọc được trên iPhone ở cả chế độ ngang và dọc.

Ở bất cứ giá nào, việc quay lại câu hỏi của bạn, kiểm tra cho thấy rằng một điều bạn KHÔNG nên làm, là sử dụng bố cục với chiều rộng linh hoạt. (Ngẫu nhiên, WP-touch sẽ làm điều đó trừ khi tôi nhầm.) Làm như vậy dẫn đến thu phóng phụ tối ưu. Trên iPad, bạn có thể phóng to một cái gì đó bị ràng buộc trong một cột rộng 480px, cho phép kích thước văn bản lớn hơn; một cái gì đó "điều chỉnh" theo chiều rộng màn hình của bạn buộc bạn phải đọc văn bản nhỏ hoặc cuộn ngang nếu nó quá nhỏ để đọc thoải mái ...


Cảm ơn bạn đã góp ý. Trang web của tôi không trôi chảy nhưng có chiều rộng cố định khoảng 976px (nội dung 676px + phần còn lại là thanh bên trái). Tôi không muốn cách mạng hóa chủ đề nhưng tôi cảm thấy nó có chiều rộng cho điện thoại 320x480 và 800x480 Có lẽ tôi sẽ xóa thanh bên hoặc ít nhất là di chuyển nó sang phải.
Drake

Tôi đồng ý 100%, từ những gì tôi đã thấy. Với rất ít ngoại lệ, "chủ đề di động" - ít nhất là các plugin "chủ đề di động" ngoài kia - hút và khó sử dụng hơn là điều hướng trang web gốc trên thiết bị di động. Mặc dù nếu bạn đủ quan tâm để thử và tạo một phiên bản di động của trang web của mình, hãy nghĩ về nó như một thiết kế lại hoàn chỉnh, thay vì chỉ là một chỉnh sửa bản định kiểu.
Goldenapples

3

Đơn giản: Sử dụng wp_is_mobile()để kiểm tra - nó sẽ kích hoạt truecho tất cả các thiết bị di động (điện thoại thông minh, máy tính bảng, v.v.).

Cập nhật

Xin đừng làm vậy. Nó không hoạt động đáng tin cậy.


2

Đây là một kịch bản thực sự tuyệt vời nếu bạn muốn tùy chỉnh nó, dễ dàng tích hợp vào wordpress. http://detectmobilebrowsers.mobi/

Một điều cần lưu ý là hầu hết người dùng điện thoại iphone, andriod hoặc điện thoại di động có hỗ trợ trình duyệt gốc không muốn được tự động chuyển hướng!

Đây là một thực tế tồi tệ, cung cấp cho họ một tùy chọn thông qua liên kết đến phiên bản di động VÀ trong phiên bản di động cung cấp cho họ tùy chọn để quay lại trang web gốc.

Tôi nhắc lại không tự động chuyển hướng người dùng của bạn trừ khi bạn xây dựng một cái gì đó rất cụ thể cho thiết bị di động hoặc bạn có lưu lượng truy cập từ các điện thoại cũ không có hỗ trợ trình duyệt riêng (không thể).

  • Muốn thêm, một cách dễ dàng để biết tầm quan trọng của việc này thông qua nhật ký máy chủ của bạn.

Quan sát tốt để cung cấp tùy chọn chuyển đổi trên cả hai phiên bản. Đôi khi bạn đang sử dụng trình duyệt không dành cho thiết bị di động nhưng kết nối chậm (qua modem di động, Wifi xấu, quay số, ...) và thích phiên bản tối ưu hóa cho thiết bị di động vì nói chung (nó cũng nhỏ hơn).
Jan Fabry

2

Tôi sẽ thêm một cách tiếp cận khác.

Có thể bạn muốn thủ công và hoàn thiện tất cả các phong cách và hành vi theo nhu cầu rất cụ thể.

Gần đây tôi đã phải: nếu IE9 một điều, nếu iPhone là thứ hai, nếu iPad là thứ ba và cứ thế ... Và đã sử dụng lớp Browser.php của Chris Schuld với kết quả tuyệt vời.

Hàm tôi đã đưa ra và sử dụng các ví dụ:

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Browser Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.