PC站手机访问跳转移动端实战

时间 : 15-07-12 评论 : 2 点击 : 1,709 次

最近一直在研究网站的移动适配。先前网站用了百度的,用了以后发现非常不给力,打开时需要跳转慢、内容不会分行分段,文字全部集中在一起完全分不清楚上跟下是哪一段,这样对于用户来说是很大的伤害,严重影响了用户体验。所以我就想了个办法,做了一个手机端的页面和移动适配。

在实施的过程中,遇到了一些问题,清远SEO简单的总结了一下,希望也能帮助SEO爱好者们。

PC端的网站程序不能用两套模板分别生成两个不同的页面

这个问题解决方法比较简单,就是将原来的PC网站、数据库复制,然后在用手机端的域名指向到该网站,然后修改掉网站的模板改为手机端的,随后生成整站。这种方法虽然有效,但有一点缺点就是以后更新的时候都要发布两篇内容了。

PC和移动端识别跳转问题

这个问题相信很多人都会遇到,就是访客用手机访问网站的时候,如何才能识别到客户端,根据不同的客户端去跳转到(手机)网页?这个很简单,其实加一段JS代码在头部就行了。
<script>
var pc_style = ""
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1,
ua: u
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

if (browser.versions.mobile && !browser.versions.iPad) {
this.location = "此处输入跳转微站首页地址";
}
</script>

有了上面的代码,用手机访问PC站的时候确实能够解决了跳转到移动端的问题。但细心的朋友会注意到,上面的跳转地址是死的,这就意味着你要手动去更新链接,这样非常麻烦,所以我又想了一个解决方法,还是利用JS来判断URL的路径,然后获取判断的URL路径设置跳转。注意:下面的代码只适用于PC端和移动端URL路径一样,域名不一样的适配,举个例子:PC站的URL是 http://http://seo.6889936.com/?p=977移动端的URL是 http://m.6889936.com/?p=977 两个的URL路径一样,只是域名不一样。

<script language=JavaScript type=text/JavaScript>
function GetUrlRelativePath()
{
var url = document.location.toString();
var arrUrl = url.split("//");

var start = arrUrl[1].indexOf("/");
var relUrl = arrUrl[1].substring(start);//stop省略,截取从start开始到结尾的所有字符

if(relUrl.indexOf("?") != -1){
relUrl = relUrl.split("?")[0];
}
return relUrl;
}
var pc_style = ""
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1,
ua: u
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

if (browser.versions.mobile && !browser.versions.iPad) {

var url = GetUrlRelativePath();

if(url)

window.location.href="http://hyoop.com"+ url; //hyoop.com改成你的手机端域名
}
</script>
这样加上上面的JS,就可以自动识别跳转了。

本文由清远SEO原创出品,请大家转载时保留本段内容。大家如有兴趣,可以与付锋一起探讨SEO技术,讨论SEO发展前景,或者讨论职业发展与人生梦想。付锋期待成为你忠实的朋友。

(既然来了何不座下来喝杯茶,小生早已设下茶宴与君同饮,与君畅谈上文阅后感想。)

本文出自:SEO清远网           官方网站地址:http://seo.6889936.com

本文标签 ,

由付锋创作室 清远SEO团队 版权所有 © 转载时请您注明出处及相应链接,文章均为( fairfu )原创,转载请保留链接: http://seo.6889936.com/?p=4476

PC站手机访问跳转移动端实战:目前有2 条留言

  1. Post:2015-07-13 上午8:29

    :cool: :cool: :cool: :cool:

  2. 沙发
    广东硅谷学院
    Post:2015-07-14 上午11:24

    对不起!15年才让你遇见我们
    对不起,15年了才让我们遇见你!并不是我们走得太慢,而是我们不希望自己走得太快。因为我们明白——教育是一份良心的事业,她需要的不是急功近利,不是飞速扩张,而是潜心的探索,辛勤的耕耘,默默的坚守,用心的付出;把技术知识毫无保留的传授给学生,让他们不仅掌握一技之长,也让他们学习了做人做事的道理,更让他们收获自己理想的工作。这也就践行了硅谷学院的“对学生负责,对家长负责,对企业负责,对社会负责”的办学理念。

发表评论


Duang~  你还没加入清远SEO微信? 你out了........


  加清远SEO技术研究中心QQ群送空间  加QQ群送域名空间
加QQ群再送微信运营平台(功能:微相册、微信机器人、图文素材、LBS位置回复、门店管理、自定义菜单、微投票、大转盘、刮刮乐、优惠券、水果机、砸金蛋、团购、会员卡、微酒店、外卖订餐、超级商城、微旅游、微婚庆、微房产等等) 

       ==站长QQ:46770222==
 ==免费咨询热线4006 422 242==
清远网是付锋创作室长期分享SEO知识及企业全网营销推广心得。清远全网营销团队在SEO研究过程中的成果奉献,免费提供各种SEO工具;全清远唯一能对各行业及大中小型企业进行现场数据分析,全程支持培训指导,打造一个属于我们的E时代,我们满怀热情,踏上燃烧的征程,释放心中的力量,成就大家的梦想,我们潜心研究互联网三大巨头的互联网思维,在BAT领域里小有微名,专注网站建设开发,SEO网站优化,网站排名,提供排名方案,电子商城策划;目前正研究开发O2O概念,以2的精神做行业领跑者一路奋进!
   网站    微信

付锋创作室

置顶文章



  • 免费咨询
  • 网站建设
  • 网站优化
  • 整合营销
  • 售后服务