判断是否是手机端访问从而跳转到手机移动端网站的代码解决方案

原创 David  2017-03-13 17:38  阅读 3,677 次
>明月合作型SEO

目前移动端流量已经大于PC端。所以基本网站制作都要考虑至少两个端,PC端,和手机移动端WAP网站。

但是有的WAP网站做好了,手机访问并不显示,结果在手机端显示的还是PC端网站样式。这是什么原因呢?明月SEO也碰到过这个问题,经多次测试,发现大部分都是百度的手机端访问识别判断代码不稳定的问题所造成的。

本文主要就是为你解决这个判断代码问题造成的做的有手机网站但是手机端访问不显示手机端网站样式的问题。

判断代码不要通过分辨率判断,手机分辨率越来越高了,电脑也可以通过缩小窗口甚至ctrl+拖动滚轮缩放,分辨率无法区分设备。而更重要的是,二维码之类的链接,手机上和电脑上的行为也确实应当加以区分。因此css3@media自适应的做法,撇开兼容性不提(用js适应也一样),也只适合确定设备类型后的细化呈现。  不要通过触摸事件判断,有的电脑鼠标触摸两用,而且无法区分平板。

还有的判断的后直接加载的样式

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件

不管是哪一种判断代码都是为了能识别出手机终端最终显示手机网站界面,以达到最佳的展示效果

手机界面展示效果图

其实判断代码有很多种,详情请参见下文。

第一种代码:

1.百度官方代码如下:

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>

<script type="text/javascript">uaredirect("/m");</script>

2.优点:百度官方,很简约

3.缺点:百度老扯淡,经常性的不稳定。不是一般的不稳定。这个代码就是问题发生的原因。看代码是调用的百度后台的代码文件,所以看起来简单。

截止到今天2017.003.13不知道扯蛋蛋扯了多久了。就是时好时坏经常不能用,YEAH!,就是不好用。

一般头部标签有适配代码:<meta http-equiv="mobile-agent" content="format=xhtml;url=/m/index.php">

详情参见:浅谈手机移动端的三种适配方案(自主适配、标注Meta声明、提交对应关系sitemap)

那么,非常稳定又好用的代码有吗?明月SEO历经多次查找,测试,编辑。找到了并推荐给你最新,又非常稳定好用带,如果上面的代码不好用,那么请用第二种代码替换掉原来你网站的判断代码,下面的第二段代码是源生的全套代码,不调用别人服务器上的那个代码了,全部自己写的代码,所以就更稳定

问题保证就能解决。明月已经测试过哦,放心使用。

第二种代码

1.自己的原生态代码如下:

<script type="text/javascript">

if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="/m/index.php";}

else if(/iPad/i.test(navigator.userAgent)){}

else{}}catch(e){}}}}

</script>

2.优点:原生态,稳定,高效,直接用

3.缺点:目前暂无 [嘻嘻]

4.怎么用?

把以上第二段代码直接插入到网站头部就行。替换掉原来调用百度的判断的那段代码。前提是你代码里要有/m文件夹(开发好的手机端网站)

明月SEO研究了以上两种基本已经解决了问题。会了上面的代码基本也就可以了。

如果还想继续了解。可以阅读下文。为了研究细致,把其他可以用的代码做了个汇总,在此也分享出来

第三种代码

经过不断的测试,研究发现。另外还有第三套代码:

var yousite="www.brightmoonseo.com";//这里改为您的电脑站访问地址不用带http://
var url=window.document.location.pathname;
var url="/mobile"+url;
var site="http://"+yousite+url;
//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳转语句
if(system.win||system.mac||system.xll)
{}
else{
window.location.href=site;
}

第四种代码:

<script type="text/javascript">var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");var browser = navigator.userAgent.toLowerCase();var isMobile = false;for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;//alert(mobileAgent[i]);location.href = '手机网址';break; } }</script>

第五种代码:

<meta name="mobile-agent" content="format=html5;url=http://www.xxx.com/3g/">
<script type="text/javascript">
var userAgentInfo = navigator.userAgent;
if  (userAgentInfo.indexOf("Android") > 0 || userAgentInfo.indexOf("iPhone") > 0 || userAgentInfo.indexOf("SymbianOS") > 0 || userAgentInfo.indexOf("Windows Phone") > 0 || userAgentInfo.indexOf("iPod") > 0 || userAgentInfo.indexOf("iPad") > 0)
{
window.location.href = "http://www.xxx.com/3g/";
}else {
}
</script>

 

第六种代码

腾讯官网用的判断代码,用JS 代码进行判断移动

<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="http://xw.qq.com/index.htm";
}else if(/iPad/i.test(navigator.userAgent)){
//window.location.href="http://www.qq.com/pad/"
}else{
window.location.href="http://xw.qq.com/simple/s/index/"
}
}catch(e){}
}
}
}
</script>}

本文地址:https://www.rrdsyy.com/434.html
关注我们:请关注一下我们的微信公众号:扫描二维码 号名称暂无
版权声明:本文为原创文章,版权归 明月SEO 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了
西安网站制作

发表评论


表情

  1. 远行
    远行 【农民】 @回复

    移动端比较复杂,不故弄啊!