• 技术文章 >web前端 >html教程

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

    2016-06-24 12:00:55原创1360

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

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


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

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

      

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


    学习了

    谢谢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代码能够判断出是在手机上运行的,还是在平板电脑上运行的?

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:怎么设定输入框输入的字符不顶在输入框的最左端?_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • Hexo建博小结• 第 9 章 音频和视频_html/css_WEB-ITnose• 使用meta实现页面的定时刷新或跳转_html/css_WEB-ITnose• 糟糕的css用法 1_html/css_WEB-ITnose• button与submit_html/css_WEB-ITnose
    1/1

    PHP中文网