2012-02-16 43 views
7

Có ai có thể giúp tôi với điều này không.Cách sử dụng userAgent để phát hiện thiết bị di động

Tôi muốn phát hiện thiết bị như Iphone, BB, andriod và trình duyệt để áp dụng css cụ thể của chúng để làm cho nó được hóa lỏng hoặc điều chỉnh theo độ phân giải của chúng.

Andriod và Iphone có vấn đề về độ phân giải khác nhau hoặc vấn đề css khi nói đến trình duyệt di động vì tôi dự định sử dụng cùng một css cho 2 vì tôi biết họ đang sử dụng cùng một trình duyệt Safari như mặc định.

+0

Tôi nghĩ rằng bạn có vấn đề về độ phân giải là bạn cần một trang web sẽ đến 100% trên mọi thiết bị. –

+0

yah im sử dụng% trên chiều rộng và chiều cao trên trang web của tôi. nhưng tôi muốn làm cho trang web trông khác trên thiết bị di động. giống như Facebook nó có phiên bản di động của nó – Bert

Trả lời

4

Cố gắng sử dụng http://www.php.net/get_browser và kiểm tra isMobileDevice lĩnh vực. Nó có thể giúp chỉ, tất nhiên, nếu đường dẫn đến browscap.ini được thiết lập trong php.ini. Nếu không, bạn có thể sử dụng các lớp học php như https://github.com/garetjax/phpbrowscap

+0

cool cool cool oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh oh this oh đã thử nó và nó hoạt động nhưng một trong những prob là nếu trong điện thoại di động họ đã cài đặt một trình duyệt khác nhau. tôi muốn được cụ thể trong thiết bị để nó sẽ được tổ chức – Bert

+0

@Bert Nó kiểm tra trình duyệt bằng chuỗi tác nhân người dùng được gửi với mọi yêu cầu. Khi trình duyệt không gửi nhận dạng trong UA, bạn không thể phát hiện nó ngay cả với javascript. Chỉ, có thể, có tính đến độ phân giải màn hình. Nhưng bạn không cần phải biết loại thiết bị đó là gì, chỉ khi nó là thiết bị di động hay không. – Cheery

+0

vâng tôi đã thử mã. sử dụng nó để phát hiện thiết bị sau đó tôi lưu trữ trong một biến $ css_iphone = ". css" liên kết CSS để thích nghi trên thiết bị khác nhau. im cũng sử dụng các truy vấn phương tiện truyền thông cho một số – Bert

6

Dưới đây là một ví dụ trong javascript:

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); 

if(isMobile) { 
    // User-Agent is IPhone, IPod, IPad, Android or BlackBerry 
} 

Để kiểm tra một chuỗi User-Agent cụ thể mà bạn có thể làm:

if(navigator.userAgent.match(/iPhone/)) { 
    // The User-Agent is iPhone 
} 
+0

oh hãy để tôi thử cái đó .. vì vậy nó sẽ có trong javascript? if (isMobile == 'iPhone') – Bert

+0

@Bert - Có javascript và bạn kiểm tra nó như sau: 'if (isMobile) {// doSomething here}'. Để kiểm tra chỉ IPhone bạn có thể làm: 'if (navigator.userAgent == 'IPhone')' – Cyclonecode

+0

yah tôi đã thử nó nó hoạt động. tôi cố gắng sử dụng document.getElementById ('id').classList.add ('class'); document.getElementById ('id'). ClassList.remove ('class'); để kiểm tra. tôi có thể sử dụng jquery cho nó. – Bert

0

Bạn có thể sử dụng CSS Truyền thông truy vấn để xác định các thiết bị khác nhau (trên thực tế các tính năng thiết bị khác nhau như thiết bị-width, dpi, vv)

Đối với CSS, bạn có thể có các tùy chọn khác nhau giống như có CSS ​​riêng cho từng loại thiết bị HOẶC có thiết kế chất lỏng có nghĩa là có cùng quy mô CSS cho các kích thước thiết bị khác nhau. Cách tiếp cận thứ 2 là hơi phức tạp để thiết kế, nhưng là linh hoạt hơn nhiều từ các thiết bị mới có thể đi lên trong tương lai ..

+0

có im sử dụng truy vấn phương tiện CSS để giải quyết cho 1024X768 trở xuống. im nghĩ đến việc làm cho cùng một cái nhìn như trong máy tính/máy tính xách tay với IPAD hoặc bất kỳ thiết bị 10.1.i cũng sẽ áp dụng điều này khi tôi có điều kiện để phát hiện mỗi thiết bị. – Bert

+0

Đó là cách tiếp cận tốt nhất khi bạn nghĩ về mặt thực tế ... Ý tôi là mỗi năm với rất nhiều thiết bị đến trong amrket, thay vì phải tạo CSS riêng cho từng thiết bị, bạn có thể sử dụng thiết kế linh hoạt/phản hồi và hãy để bản thân quy mô bố trí theo thiết bị mà nó được xem trên .. – testndtv

+0

tôi hiểu. hoàn toàn chính xác của bạn. do độ phân giải khác nhau của thiết bị khiến nhà phát triển web khó chỉnh sửa tệp css để thích ứng với thiết bị, tốt hơn nên sử dụng kiểu chất lỏng để sử dụng trong tương lai. – Bert

2
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
<meta name="HandheldFriendly" content="true"/> 
<meta name="MobileOptimized" content="320"/> 
<meta http-equiv="cleartype" content="on" /> 


use this code on your website under <header> tag. 

Đây là đoạn mã để phát hiện thiết bị di động.

function isMobile() { 

// Check the server headers to see if they're mobile friendly 
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) { 
    return true; 
} 

// If the http_accept header supports wap then it's a mobile too 
if(preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) { 
    return true; 
} 

// Still no luck? Let's have a look at the user agent on the browser. If it contains 
// any of the following, it's probably a mobile device. Kappow! 
if(isset($_SERVER["HTTP_USER_AGENT"])){ 
    $user_agents = array("midp", "j2me", "avantg", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto"); 
    foreach($user_agents as $user_string){ 
     if(preg_match("/".$user_string."/i",$_SERVER["HTTP_USER_AGENT"])) { 
      return true; 
     } 
    } 
} 

// Let's NOT return "mobile" if it's an iPhone, because the iPhone can render normal pages quite well. 
if(preg_match("/iphone/i",$_SERVER["HTTP_USER_AGENT"])) { 
    return false; 
} 

// None of the above? Then it's probably not a mobile device. 
return false; 
} 
    if (isMobile()) { 
    header("location:$mobile"); 
    // if the function returned true, it's a mobile. 
    //echo "mobile"; // delete this line in your code, and uncomment the next line 
// header('Location: http://www.yoursite.mobi/'); // let's redirect the page to the mobile site 

    } 

Hy vọng điều này sẽ giúp bạn.

+0

tôi tìm kiếm trên mạng và thấy rằng chế độ xem là để điều khiển bố cục trên thiết bị di động. cảm ơn điều này là những gì bị bỏ lỡ .. – Bert

+7

tôi thực sự không thích 'KHÔNG trả lại' di động 'nếu đó là iPhone' –

-1

tôi sử dụng này:

$mobile= stripos($_SERVER['HTTP_USER_AGENT'], 'mob'); 

Nó hoạt động hầu hết thời gian.

Javascript

var mobile= navigator.userAgent.toLowerCase().indexOf('mob'); 

-1 nếu không điện thoại di động; bất kỳ giá trị nào khác nếu điện thoại di động

0
<?php 

$useragent=$_SERVER['HTTP_USER_AGENT']; 

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|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|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(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|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) 

header('Location: http://detectmobilebrowser.com/mobile'); 

?> 
Các vấn đề liên quan