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

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

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

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

<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"/>

这个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>  

最好是在后端做判断，初始化对应的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;}    

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

学习了

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

这两个正则差不多了~~

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

js不能跑正则么？

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

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