Tự động phát hiện trình duyệt di động (thông qua tác nhân người dùng?) [Đã đóng]

Làm cách nào tôi có thể phát hiện nếu người dùng đang xem trang web của tôi từ trình duyệt web trên thiết bị di động để sau đó tôi có thể tự động phát hiện và hiển thị phiên bản phù hợp của trang web của mình?

Có, đọc tiêu đề Tác nhân người dùng sẽ thực hiện thủ thuật.

Có một số danh sách ngoài kia của các tác nhân người dùng di động đã biết, do đó bạn không cần phải bắt đầu từ đầu. Những gì tôi đã làm khi tôi phải xây dựng một cơ sở dữ liệu về các tác nhân người dùng đã biết và lưu trữ các ẩn số khi chúng được phát hiện để sửa đổi và sau đó tự tìm ra chúng là gì. Điều cuối cùng này có thể là quá mức cần thiết trong một số trường hợp.

Nếu bạn muốn làm điều đó ở cấp độ Apache, bạn có thể tạo một tập lệnh tạo định kỳ một tập hợp các quy tắc viết lại kiểm tra tác nhân người dùng (hoặc chỉ một lần và quên các tác nhân người dùng mới, hoặc mỗi tháng một lần, bất cứ điều gì phù hợp với trường hợp của bạn), như

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

ví dụ, điều này sẽ chuyển yêu cầu tới http: //domain/index.html sang http: //domain/mobile/index.html

Nếu bạn không thích cách tiếp cận để tạo tập lệnh tái tạo tệp htaccess theo định kỳ, bạn có thể viết mô-đun kiểm tra Tác nhân người dùng (Tôi không tìm thấy tập lệnh nào được tạo, nhưng tìm thấy ví dụ đặc biệt phù hợp này ) và lấy tác nhân người dùng từ một số trang web để cập nhật chúng. Sau đó, bạn có thể làm phức tạp cách tiếp cận nhiều như bạn muốn, nhưng tôi nghĩ trong trường hợp của bạn, cách tiếp cận trước đó sẽ ổn.

Có các tập lệnh mã nguồn mở trên Detect Mobile Browser thực hiện điều này trong Apache, ASP, ColdFusion, JavaScript và PHP.

Chỉ là một suy nghĩ nhưng nếu bạn làm việc vấn đề này từ hướng ngược lại thì sao? Thay vì xác định trình duyệt nào là thiết bị di động, tại sao không xác định trình duyệt nào không? Sau đó, mã trang web của bạn để mặc định cho phiên bản di động và chuyển hướng đến phiên bản tiêu chuẩn. Có hai khả năng cơ bản khi nhìn vào trình duyệt di động. Nó có hỗ trợ javascript hoặc không. Vì vậy, nếu trình duyệt không có hỗ trợ javascript, nó sẽ mặc định là phiên bản di động. Nếu nó có hỗ trợ JavaScript, hãy kiểm tra kích thước màn hình. Bất cứ điều gì dưới một kích thước nhất định cũng có thể sẽ là một trình duyệt di động. Bất cứ điều gì lớn hơn sẽ được chuyển hướng đến bố cục tiêu chuẩn của bạn. Sau đó, tất cả những gì bạn cần làm là xác định xem người dùng bị tắt JavaScript có di động hay không.
Theo W3C, số người dùng bị vô hiệu hóa JavaScript là khoảng 5% và hầu hết những người dùng đó đã tắt nó đi, ngụ ý rằng họ thực sự biết họ đang làm gì với trình duyệt. Họ có phải là một phần lớn trong khán giả của bạn? Nếu không thì đừng lo lắng về họ. Nếu vậy, trường hợp xấu nhất là gì? Bạn có những người dùng đang duyệt phiên bản di động của trang web của bạn và đó là một điều tốt.

Đây là cách tôi làm điều đó trong JavaScript:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

Xem một ví dụ tại www.tablemaker.net/test/mobile.html nơi nó tăng gấp ba lần kích thước phông chữ trên điện thoại di động.

Cơ chế phát hiện trình duyệt di động yêu thích của tôi là WURFL . Nó được cập nhật thường xuyên và nó hoạt động với mọi nền tảng lập trình / ngôn ngữ chính.

Bạn đã xem xét sử dụng truy vấn phương tiện css3? Trong hầu hết các trường hợp, bạn có thể áp dụng một số kiểu css dành riêng cho thiết bị được nhắm mục tiêu mà không phải tạo phiên bản di động riêng của trang web.

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

Bạn có thể đặt chiều rộng thành bất cứ thứ gì bạn muốn, nhưng 1025 sẽ bắt được chế độ xem ngang của iPad.

Bạn cũng sẽ muốn thêm thẻ meta sau vào đầu của mình:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Hãy xem bài viết này tại HTML5 Rocks để biết một số ví dụ hay

cho ANDROID, IPHONE, IPAD, BLACKBERRY, PALM, WINDOWS CE, PALM

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

Tệp trình duyệt thiết bị di động là một cách tuyệt vời để phát hiện các trình duyệt di động (và khác) cho các dự án ASP.NET: http://mdbf.codeplex.com/

Bạn có thể phát hiện các máy khách di động đơn giản thông qua navigator.userAgentvà tải các tập lệnh thay thế dựa trên loại máy khách được phát hiện là:

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/iPad/i)
          || navigator.userAgent.match(/iPod/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

Bạn có thể kiểm tra chuỗi User-Agent. Trong JavaScript, điều đó thực sự dễ dàng, nó chỉ là một thuộc tính của đối tượng điều hướng.

var useragent = navigator.userAgent;

Bạn có thể kiểm tra xem thiết bị nếu iPhone hoặc Blackberry trong JS có giống như không

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

Nếu isIphone đúng là bạn đang truy cập trang web từ Iphone, nếu isBlack BlackBerry bạn đang truy cập trang web từ Blackberry.

Bạn có thể sử dụng plugin "UserAgent Switcher" cho firefox để kiểm tra điều đó.

Nếu bạn cũng quan tâm, có thể đáng để kiểm tra tập lệnh "redirection_mobile.js" của tôi được lưu trữ trên github tại đây https://github.com/sebarmeli/JS-Redirection-Mobile-Site và bạn có thể đọc thêm chi tiết trong một bài viết của tôi ở đây:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version- phiên-javascript /

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

Ví dụ này hoạt động trong asp.net

Bạn chưa nói ngôn ngữ nào bạn đang sử dụng. Nếu đó là Perl thì nó tầm thường:

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}

Có tác nhân người dùng được sử dụng để phát hiện trình duyệt di động. Có rất nhiều kịch bản miễn phí có sẵn để kiểm tra điều này. Đây là một mã php như vậy sẽ giúp bạn chuyển hướng người dùng di động đến trang web khác.

Tôi đặt bản demo này với các kịch bản và ví dụ kèm theo:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

Ví dụ này sử dụng các hàm php để phát hiện tác nhân người dùng và cung cấp lợi ích bổ sung cho phép người dùng nêu ưu tiên cho phiên bản của trang web thường không phải là mặc định dựa trên loại trình duyệt hoặc thiết bị của họ. Điều này được thực hiện với cookie (được duy trì bằng cách sử dụng php ở phía máy chủ trái ngược với javascript.)

Hãy chắc chắn kiểm tra các liên kết tải xuống trong bài viết cho các ví dụ.

Hy vọng bạn thích!

MobileESP có các móc nối PHP, Java, APS.NET (C #), Ruby và JavaScript. nó cũng có giấy phép Apache 2, miễn phí cho sử dụng thương mại. Điều quan trọng đối với tôi là nó chỉ xác định các trình duyệt và nền tảng chứ không phải kích thước màn hình và các số liệu khác, giúp nó nhỏ gọn.

Có một giải pháp hoàn toàn mới sử dụng Zend Framework. Bắt đầu từ liên kết đến Zend_HTTP_UserAgent:

http://framework.zend.com/manual/en/zend.http.html