判断电脑访问移动端网页及移动端访问PC端网页的跳转和提示方法

标哥 2021-12-12 14:8:51 技术收藏 次阅读　查看评论

    公司官网有移动端和PC端区分，两者数据相同，但是页面排版不同，PC端因为显示器分辨率基本是比较固定，所以用"px"来设定网页尺寸，而移动端，大家知道移动设备屏幕大小和分辨率可谓百花齐放，所以移动端网页是自适应，会根据用户使用设备的屏幕分辨率自动按比例放大和缩小，使用“%”和“vw”来设定网页尺寸。

    这样如果用电脑浏览器访问移动端的网页，会发现字体图片超大，反之，如果用移动设备去访问PC端的网页，会发现字体很小，这样很影响用户对网站的体验。

    我们很难避免用户走错入口，因为是公司网站，难免会有分享链接之类的，一旦用户把PC网页发给使用手机比如微信的人，手机打开就可能会出现上面说的，网页字体很小的问题，所以要解决这个问题，就需要在用户打开链接的时候判断一下，然后自动引导到正确的地方。

    所以我们在制作网站的时候，会加入判断用户设备的代码，移动端的网页就比较简单，简单的判断用户设备，如果是移动设备，则直接跳转到移动端网页。

var urlhash = window.location.hash;
if (!urlhash.match("fromapp")){
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
location.replace(murl);
}
}
} catch(err){}
}
mobileRedirect("/M");

    这段代码是判断用户如果使用了列表中的移动设备，则自动引导到移动端网页“/M”目录，而不会因为链接是PC端而进入PC页面。

    可是也有一种是相反的情况，就是移动端分享了一个连接给使用电脑的用户，电脑用户打开了“M”目录下的移动版网页，就会出现前面说的字体超大的问题，但电脑端可控性比较好，可以根据需要放大缩小浏览器窗口达到最好的视觉效果，所以我们在做网页的时候不能够强制电脑进入PC端网页，只需要给个提示就好，比如在页面滑出一个窗口，提示“您正访问的是移动端网页，可切换到电脑端以获得最佳效果”。

    怎么做到呢？首先当然是判断，然后就是提示。我在移动端网页是这样写的：

window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 1){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
var str = location.pathname.substr(2);/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(navigator.userAgent) ? "":document.write('<div class=div1><div id=div2 class=div2>您正在浏览移动版网页，可切换到 [ ' + '<a href=' + str + '>电脑版</a>' + ' ] 以获得最佳浏览效果。</div></div>');

    整段代码的意思其实就是判断用户如果使用的不是列表中的移动设备，则出现div窗口提示，否则就隐藏窗口。PC端地址是正常根目录，而移动端则是"/M"，所以里面还有获取当前网址后段的代码，然后去掉代码开头部分的“/M”就是网站根目录的PC端了。

   提示窗口使用CSS控制DIV隐藏或者显示，代码如下：

.div1 {
    height:5vw;
	font-size:2.5vw;
	color:#FFF;
	text-align:center;
}
.div1 a{
	color: #F03
	}
.div1 a:hover{
	color: #0F0;
	}
.div2 {
    width:100%;
    height:5vw;
	line-height:5vw;
    background-color:#3399FF;
}
.div2_1{
    position:fixed;
    width:100%;
    height:5vw;
	line-height:5vw;
    background-color:#3399FF;
	z-index:99999;
}

    这样就能达到一个效果，如果用户使用的是移动设备访问移动网页，就一切正常，否则就在网页顶部出现提示窗口。

    最终效果还是挺满意的，对于一个业余编程爱好者来说，做好这些功能，还是有些成就感的。