Heim > Web-Frontend > HTML-Tutorial > 求大神解答 关于判断是手机客户端还是平板客户端的问题。_html/css_WEB-ITnose

求大神解答 关于判断是手机客户端还是平板客户端的问题。_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:00:55
Original
2004 Leute haben es durchsucht

一段JS代码,一段HTML+CSS代码,运行之前,如何判断是在手机上运行的,还是在平板电脑上运行的?  
---- 如果是获取手机或平板的设备型号来判断,如何JS来判断?


回复讨论(解决方案)

可以在后端判断,然后输出特征字符串,然后这个字符串组合前端样式。
根据客户端来判断,会造成各种资源的浪费或页面显示效果的各种问题。
以下是判断手机与pc端的,然后按照要求,在判断出移动端之后,在判断是平板还是手机。
具体的判断的方式也可以使用这种:
http://www.csdn.net/article/2013-01-10/2813567-mobile-detect-open-source-class
大概思路就是这样

public function index(){    if($this->is_mobile()){        $data['home'] = 'wap';    } else {        $data['home'] = 'www';    }}protected function is_mobile(){    $user_agent    = $_SERVER['HTTP_USER_AGENT'];    $mobile_agents = Array("240x320", "acer", "acoon", "acs-", "abacho", "ahong", "airness", "alcatel", "amoi", "android", "anywhereyougo.com", "applewebkit/525", "applewebkit/532", "asus", "audio", "au-mic", "avantogo", "becker", "benq", "bilbo", "bird", "blackberry", "blazer", "bleu", "cdm-", "compal", "coolpad", "danger", "dbtel", "dopod", "elaine", "eric", "etouch", "fly ", "fly_", "fly-", "go.web", "goodaccess", "gradiente", "grundig", "haier", "hedy", "hitachi", "htc", "huawei", "hutchison", "inno", "ipad", "ipaq", "ipod", "jbrowser", "kddi", "kgt", "kwc", "lenovo", "lg ", "lg2", "lg3", "lg4", "lg5", "lg7", "lg8", "lg9", "lg-", "lge-", "lge9", "longcos", "maemo", "mercator", "meridian", "micromax", "midp", "mini", "mitsu", "mmm", "mmp", "mobi", "mot-", "moto", "nec-", "netfront", "newgen", "nexian", "nf-browser", "nintendo", "nitro", "nokia", "nook", "novarra", "obigo", "palm", "panasonic", "pantech", "philips", "phone", "pg-", "playstation", "pocket", "pt-", "qc-", "qtek", "rover", "sagem", "sama", "samu", "sanyo", "samsung", "sch-", "scooter", "sec-", "sendo", "sgh-", "sharp", "siemens", "sie-", "softbank", "sony", "spice", "sprint", "spv", "symbian", "tablet", "talkabout", "tcl-", "teleca", "telit", "tianyu", "tim-", "toshiba", "tsm", "up.browser", "utec", "utstar", "verykool", "virgin", "vk-", "voda", "voxtel", "vx", "wap", "wellco", "wig browser", "wii", "windows ce", "wireless", "xda", "xde", "zte");    $is_mobile     = false;    foreach($mobile_agents as $device){        if(stristr($user_agent, $device)){            $is_mobile = true;            break;        }    }    return $is_mobile;}    
Nach dem Login kopieren
Nach dem Login kopieren

<link rel="stylesheet" type="text/css" href="css/<?php echo $home; ?>_home.css" media="all"/<script type="text/javascript" src="js/init/<?php echo $home; ?>_home.init.js"></script>
Nach dem Login kopieren
Nach dem Login kopieren

最后输出的字符串是这样的:

<link rel="stylesheet" type="text/css" href="css/www_home.css" media="all"/><link rel="stylesheet" type="text/css" href="css/wap_home.css" media="all"/>
Nach dem Login kopieren

这个www_home.css与wap_home.css是准备好的不同终端的样式。js也是同样的道理。
参考一下。

可以通过js来获取用的ua(user agent)信息。参考代码:

<script type="text/javascript">    $(function(){   var userAgent = navigator.userAgent;   alert(userAgent)   var index = userAgent.indexOf("Android")   if(index >= 0){     var androidVersion = parseFloat(userAgent.slice(index+8));      if(androidVersion<3){      // 版本小于3的事情      alert('版本小于3');     }   }  });  </script>  
Nach dem Login kopieren

最好是在后端做判断,初始化对应的css和js

可以在后端判断,然后输出特征字符串,然后这个字符串组合前端样式。
根据客户端来判断,会造成各种资源的浪费或页面显示效果的各种问题。
以下是判断手机与pc端的,然后按照要求,在判断出移动端之后,在判断是平板还是手机。
具体的判断的方式也可以使用这种:
http://www.csdn.net/article/2013-01-10/2813567-mobile-detect-open-source-class
大概思路就是这样

public function index(){    if($this->is_mobile()){        $data['home'] = 'wap';    } else {        $data['home'] = 'www';    }}protected function is_mobile(){    $user_agent    = $_SERVER['HTTP_USER_AGENT'];    $mobile_agents = Array("240x320", "acer", "acoon", "acs-", "abacho", "ahong", "airness", "alcatel", "amoi", "android", "anywhereyougo.com", "applewebkit/525", "applewebkit/532", "asus", "audio", "au-mic", "avantogo", "becker", "benq", "bilbo", "bird", "blackberry", "blazer", "bleu", "cdm-", "compal", "coolpad", "danger", "dbtel", "dopod", "elaine", "eric", "etouch", "fly ", "fly_", "fly-", "go.web", "goodaccess", "gradiente", "grundig", "haier", "hedy", "hitachi", "htc", "huawei", "hutchison", "inno", "ipad", "ipaq", "ipod", "jbrowser", "kddi", "kgt", "kwc", "lenovo", "lg ", "lg2", "lg3", "lg4", "lg5", "lg7", "lg8", "lg9", "lg-", "lge-", "lge9", "longcos", "maemo", "mercator", "meridian", "micromax", "midp", "mini", "mitsu", "mmm", "mmp", "mobi", "mot-", "moto", "nec-", "netfront", "newgen", "nexian", "nf-browser", "nintendo", "nitro", "nokia", "nook", "novarra", "obigo", "palm", "panasonic", "pantech", "philips", "phone", "pg-", "playstation", "pocket", "pt-", "qc-", "qtek", "rover", "sagem", "sama", "samu", "sanyo", "samsung", "sch-", "scooter", "sec-", "sendo", "sgh-", "sharp", "siemens", "sie-", "softbank", "sony", "spice", "sprint", "spv", "symbian", "tablet", "talkabout", "tcl-", "teleca", "telit", "tianyu", "tim-", "toshiba", "tsm", "up.browser", "utec", "utstar", "verykool", "virgin", "vk-", "voda", "voxtel", "vx", "wap", "wellco", "wig browser", "wii", "windows ce", "wireless", "xda", "xde", "zte");    $is_mobile     = false;    foreach($mobile_agents as $device){        if(stristr($user_agent, $device)){            $is_mobile = true;            break;        }    }    return $is_mobile;}    
Nach dem Login kopieren
Nach dem Login kopieren

<link rel="stylesheet" type="text/css" href="css/<?php echo $home; ?>_home.css" media="all"/<script type="text/javascript" src="js/init/<?php echo $home; ?>_home.init.js"></script>
Nach dem Login kopieren
Nach dem Login kopieren


学习了

谢谢2楼和3楼,我测试下。有没有不是PHP代码...?

   // Tablet   private static Regex regexTablet = new Regex("^.*iPad.*$|^.*tablet.*$|^.*Android\\s3.*$|^(?!.*Mobile.*).*Android.*$", RegexOptions.IgnoreCase);   // Mobile   private static Regex regexMobile = new Regex("^.*(iPhone|iPod|Android.*Mobile|Windows\\sPhone|IEMobile|BlackBerry|Mobile).*$", RegexOptions.IgnoreCase);....HttpContext httpContext = HttpContext.Current;string ua = httpContext.Request.UserAgent;if (regexTablet.IsMatch(ua)){      return DISPLAY_MODE_PC;}if (regexMobile.IsMatch(ua)){      return DISPLAY_MODE_MOBILE;}
Nach dem Login kopieren


这两个正则差不多了~~

感谢6楼,有没有纯JS代码能够判断出是在手机上运行的,还是在平板电脑上运行的?

js不能跑正则么?

直接匹配一下那两个正则就差不多了~~

感谢6楼,有没有纯JS代码能够判断出是在手机上运行的,还是在平板电脑上运行的?

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage