[Mobile Web]Web中如何分辨移动设备?(iPad、iPhone、Android)

第一种, Javascript

[javascript] view plaincopyprint?

  1. [javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    var deviceAgent = navigator.userAgent.toLowerCase();
     var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
     if(agentID.indexOf("iphone")>=0){
      alert("iphone");
     }
     if(agentID.indexOf("ipod")>=0){
      alert("ipod");
     }
     if(agentID.indexOf("ipad")>=0){
      alert("ipad");
     }
     if(agentID.indexOf("android")>=0){
      alert("android");
     }  

      

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
    </style>
    <script type="text/javascript">
      function initialize() {
        var useragent = navigator.userAgent;
        if (useragent.indexOf(‘iPhone‘) != -1) {
            alert("iPhone");
        } else if(useragent.indexOf(‘iPad‘) != -1 ) {
            alert("iPad");
        } else if(useragent.indexOf(‘Android‘) != -1 ) {
            alert("Android");
        } else {
            alert("其他平台");
        }
      }
    </script>
    </head>
    <body onload="initialize()">
    </body>
    </html>  

第二种 Java:

[java] view plaincopyprint?

  1. Enumeration   typestr = request.getHeaderNames();
    String s1 = request.getHeader("user-agent");
    if(s1.contains("Android")) {
        System.out.println("Android移动客户端");
    } else if(s1.contains("iPhone")) {
        System.out.println("iPhone移动客户端");
    }  else if(s1.contains("iPad")) {
        System.out.println("iPad客户端");
    }  else {
        System.out.println("其他客户端");
    }  

整个页面 index.jsp:

 

  1. <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="shortcut icon" href="favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <%
            Enumeration   typestr = request.getHeaderNames();
            String s1 = request.getHeader("user-agent");
            if(s1.contains("Android")) {
                System.out.println("Android移动客户端");
            } else if(s1.contains("iPhone")) {
                System.out.println("iPhone移动客户端");
            }  else if(s1.contains("iPad")) {
                System.out.println("iPad客户端");
            }  else {
                System.out.println("其他客户端");
            }
        %>
    </body>
    </html> 

这两种方法测试下来,一般情况下可以满足需要,遇到像UC浏览器这些第三方浏览器,可能就不准了!

原文出自:http://blog.csdn.net/feng88724/article/details/7312827

时间: 2024-08-29 23:50:52

[Mobile Web]Web中如何分辨移动设备?(iPad、iPhone、Android)的相关文章

转载[Mobile Web]Web中如何分辨移动设备?(iPad、iPhone、Android)

已验证过javascript方法可以使用 var deviceAgent = navigator.userAgent.toLowerCase(); 02. var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/); 03. if(agentID.indexOf("iphone")>=0){ 04. alert("iphone"); 05. } 06. if(agentID.indexOf(&qu

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么不同,但得益于苹果对于智能机的推动,CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了. webkit内核中一些私有的meta标签 1 2 3 4 <meta name="apple-mobile-web-app-capable" content

web设计经验&lt;一&gt; 提升移动设备响应式设计的8个建议

第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事.设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般性”的web体验,因此直观性具有很重要的作用. 直观不代表空白.丑

用jQuery Mobile创建Web App

移动互联网的发展,促生了各种各样的移动Web框架.jQuery是继Prototype之后又一个优秀的JavaScript框架.通过jQuery,我们能够快速地处理HTML文档.控制事件.给页面添加动画和Ajax效果.在Web设计中,我们通常会将设计转化成代码.但是这个过程通常是漫长而又反复,更悲剧的是,代码的可用性还要打个问号.而通过jQuery插件,我们只需在短短的几分钟内就能解决以往需要几小时甚至是几天的问题. 在本文中,Jake Rocheleau将为我们展示如何用jQuery来创建一个基

如何把Power BI嵌入到Web应用中

(此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI是微软的创新性(或者称之为敏捷型)BI产品,从发布之初就备受关注,因为它是一个只能以纯SaaS模式提供服务端的BI产品.目前Power BI其实是以两种方式提供服务端: Power BI Service.只能通过Office 365来购买订阅,一般作为一个独立的BI应用供企业内部使用. Power BI Em

在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式,虽然Web API或者WCF方式的调用,相对直接连接数据库方式,响应效率上略差一些,不过扩展性强,也可以调动更多的设备接入,包括移动应用接入,网站接入,Winfrom客户端接入,这样可以使得服务逻辑相对独立,负责提供接口即可.这种方式中最有代表性的就是当前Web API的广泛应用,促进了各个接入端

SpringMVC项目中web.xml中的节点加载顺序问题

SpringMVC项目中web.xml中的节点加载顺序问题,之前以为web.xml中就是一些配置信息,和节点的顺序没有关系,后来才发现初始化时的加载顺序是和节点的顺序相关的. 完整的web.xml文件内容: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=&quo

web开发中的长度单位(px,em,ex,rem),如何运用,看完这篇就够了!

原创 2017-03-08 web小二 web前端开发 作为一名前端开发人员,css中的长度单位,都是我们在工作中非常熟悉的名词,因为没有它们,我们就不能声明某个字符应该多大,或者某些图像周围应该留白多少,甚至有时候能导致css不能进行正常工作,所以在很多css属性中,它们都是依赖于长度单位来显示各种页面元素. 1.长度单位包括哪些? 长度单位,其实在我们的生活中,也非常常见,例如,厘米.毫米.英寸,还有经常接触到的像素(px),元素的字体高度(em).字母x的高度(ex).百分比(%)等等这些

在Java Web程序中使用监听器可以通过以下两种方法

之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响应,从本质上来说这些都是观察者模式的具体实现,在web程序中的监听器也不例外.在Java Web程序中使用监听器可以通过以下两种方法:通过注解@WebListener来标识一个自定义的监听器:[java] view plain copy@WebListener public class Custom