判断当前登录的终端是PC端还是移动端

女爷i 2022-08-04 16:56 268阅读 0赞

一、最近要把web页面放到手机端，所以在开始登录的时候就跳转。先记下，调试中。

1、刚开始在login.jsp里面写的js，暂时发现browser.versions.mobile这个有点问题，但是还好没有用到。

<script type="text/javascript">

var browser = \{    
        versions : function() \{    
            var u = navigator.userAgent, app = navigator.appVersion;    
            return \{//移动终端浏览器版本信息                                     
            trident : u.indexOf('Trident') > -1, //IE内核                                     
            presto : u.indexOf('Presto') > -1, //opera内核                                     
            webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核                                     
            gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核                                    
            mobile : !!u.match(/AppleWebKit.\*Mobile.\*/)    
                    || !!u.match(/AppleWebKit/), //是否为移动终端                                     
            ios : !!u.match(/\\(i\[^;\]+;( U;)? CPU.+Mac OS X/), //ios终端                     
            android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器                                     
            iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器                        
            iPad: u.indexOf('iPad') > -1, //是否iPad           
            webApp : u.indexOf('Safari') == -1,//是否web应该程序，没有头部与底部    
            google:u.indexOf('Chrome')>-1    
        \};    
    \}(),    
    language : (navigator.browserLanguage || navigator.language).toLowerCase()    
    \}    
    //document.writeln("语言版本: "+browser.language);    
    //document.writeln(" 是否为移动终端: "+browser.versions.mobile);    
      
    var type="PC";  
      
    function IsMobile()   
\{   
var userAgentInfo = navigator.userAgent;   
var Agents = new Array( "iphone", "android", "symbianos", "windows phone", "ipad", "ipod");   
var flag = false;   
for (var v = 0; v < Agents.length; v++) \{   
if (userAgentInfo.toLowerCase().indexOf(Agents\[v\]) != -1) \{   
type=Agents\[v\];  
flag = true;   
break;   
\}   
\}   
return flag;   
\}  
    IsMobile();  
    document.getElementById("isMobile").innerHTML=type;   
    document.getElementById("currentLanguage").innerHTML=browser.language;   
      
    if(type != "PC")\{  
    //window.document.location.href='$\{pageContext.request.contextPath\}/Order/IncomeConfirm/gotoListExitOrders';  
    window.document.location.href="$\{pageContext.request.contextPath\}/template/mobile/home/MobileLogin.jsp";  
    \}

</script>

2、后面发现直接在index.jsp里面写js跳转到对应的页面就可以了。

<script type="text/javascript">    
    var type="PC";  
var userAgentInfo = navigator.userAgent;   
var Agents = new Array( "iphone", "android", "symbianos", "windows phone", "ipad", "ipod");   
var flag = false;   
for (var v = 0; v < Agents.length; v++) \{   
if (userAgentInfo.toLowerCase().indexOf(Agents\[v\]) != -1) \{   
type=Agents\[v\];  
flag = true;   
break;   
\}   
\}   
      
    if(type != "PC")\{  
    window.document.location.href="$\{pageContext.request.contextPath\}/template/mobile/home/MobileLogin.jsp";  
    \}else\{  
    window.document.location.href="$\{pageContext.request.contextPath\}/template/home/Login.jsp";  
    \}  
      
</script>

二、按jqueryMobile写法，发现页面上展示的元素都太小了

这种是正常的，因为手机浏览器会自动对页面缩放，以适应手机屏幕。如果要手机浏览器对页面进行调整的话，在<head>标签里加上
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    这样在手机浏览器里显示就是正常大小了，不过这样的话，你的页面就会和之前放大一样，超出了屏幕显示范围。如果你要让页面适应手机屏幕显示，而且内容显示正常的，建议去参考响应式网页设计

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关判断是PC端还是移动端

var browser={ versions:function(){ var u = na

古城微笑少年丶/ 2023年01月05日 14:29/ 0 赞/ 181 阅读

相关 JavaScript 判断设备是PC端还是移动端

原理就不说了，直接写份实用的代码好了 function goPAGE() { if((navigator.userAgent.match(/(phone|

悠悠/ 2022年12月18日 10:57/ 0 赞/ 213 阅读

相关 js判断是PC端还是手机端

效果预览：[https://miofly.gitee.io/resources/html/project/module/%E5%88%A4%E6%96%AD%E6%98%AF%

比眉伴天荒/ 2022年10月27日 06:16/ 0 赞/ 267 阅读

相关 js判断设备是PC端还是移动端

方法一 function IsPC() { var userAgentInfo = navigator.userAgent; va

喜欢ヅ旅行/ 2022年10月24日 05:54/ 0 赞/ 249 阅读

相关判断当前登录的终端是PC端还是移动端

一、最近要把web页面放到手机端，所以在开始登录的时候就跳转。先记下，调试中。 1、刚开始在login.jsp里面写的js，暂时发现browser.versions

女爷i/ 2022年08月04日 16:56/ 0 赞/ 269 阅读

相关怎么判断是Pc端还是移动端？

怎么判断是Pc端还是移动端？ console.log(window.navigator.userAgent) 移动端返回的是：“Mozilla/5.0 (Li

青旅半醒/ 2022年05月23日 11:24/ 0 赞/ 327 阅读

相关判断当前客户端是pc端还是移动端还是Ipad

实现手机和电脑两种不同的布局，判断手机还是电脑:window.onload一个页面只能有一个 <!doctype html> <html> <head

我就是我/ 2022年05月21日 08:28/ 0 赞/ 360 阅读

相关 js判断用户的浏览器设备是移动端还是pc端

最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式，主要是判断移动设备还是电脑浏览器访问的。下面给出js判断处理代码，以作参考。 <scrip

た入场券/ 2022年04月23日 08:06/ 0 赞/ 380 阅读

相关 php判断页面访问是移动端还是pc端

在使用浏览器发起的 HTTP 请求中，通常会包含一个识别标识。它名为 User Agent，简称 UA。它是一串包含了客户端基础信息的字符串。通过它可以方便的获取客户端的操作系

清疚/ 2021年09月30日 15:00/ 0 赞/ 542 阅读

相关 JS判断是手机端还是PC端

function browserRedirect() { var sUserAgent = navigator.use

青旅半醒/ 2021年09月18日 12:56/ 0 赞/ 571 阅读