欢迎光临九牛科技,我们是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司!

咨询热线:22123691或18920333521    网站导航  社区团购  抖音运营
新闻中心News
天津网站建设-高端网站制作-网页设计-百度seo优化-网络营销-小程序开发推广-公众号运营公司-武清做网站-九牛科技

PC端与移动端网站相互访问跳转代码

作者:小牛 | 点击: | 来源:小牛
3003
2020
最近在给公司网站优化的时候发现,用电脑搜索关键词 天津网站制作 ,显示的是公司的移动网站的链接(出现这个问题,应该网站主页出问题了,权重没有手机端的高,这里先不讨论...
最近在给公司网站优化的时候发现,用电脑搜索关键词“天津网站制作”,显示的是公司的移动网站的链接(出现这个问题,应该网站主页出问题了,权重没有手机端的高,这里先不讨论),这样打开以后显示的手机网站,用户体验不太好,于是小编在移动端加了一下识别跳转代码,这样用电脑打开以后,直接就跳转到PC网站了,提升了用户体验。下面小编为大家整理一些关于PC端网站与移动端网站相互访问跳转的几种方式:
 
 
 
一、响应式布局
 
这种一般是比较常见的跳转方式,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式,pc和移动用的是同一套html代码且网址是同一个网址。
 
下面这行代码一般放在<head>标签里面,目的是告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放;
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
网页样式一般在css中调整,用@media screen and (max-width: 980px) {}这种形式,意思是屏幕宽度小于980px时使用{}里面的样式,这种响应式布局,宽度常采用百分比的形式,如果害怕图片变形,可以使用{width:auto;max-width:100%}。
 
 
二、跳转适配
 
这种一般也比较常见,站长在做优化时,会有www和m两个站,一个pc一个移动,用户在访问网站时,检测当前所用设备,跳转到对应的网址,pc和移动用的是不同代码且网址也不同。
 
在pc版网页上,添加指向对应移动版网址的特殊链接 rel="alternate" 标记。
 
在移动版网页上,添加指向对应pc版网址的链接 rel="canonical" 标记。
 
例如,假设pc版网址为http://www.abc.com/id.html,且对应的移动版网址为 http:/m.abc.com/id.html,那么在pc版网页上,添加:
 
<link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.abc.com/id.html" >
 
而在移动版网页上,添加:
 
<link rel="canonical" href="http://abc.com/id.html" >
 
 
三、代码适配
 
这种方法比较复杂,一般的话是比较大型的网站会使用的跳转方法,网站是使用的同一网址,但是根据访问端口的不同,返回不同的代码,如果是电脑端,就会返回电脑端的代码,如果是yd端,返回的代码就又不同了。
 
这种方法会需要添加Vary HTTP 标头,其作用借用百度文档里的解释:
 
1、它会向百度传递一个信号,表示说这是个代码适配的站点,百度就会尽快把网站抓取一遍进行适配;
 
2、它可以防止用户接收到错误的网页缓存。
 
这部分是在网站的服务器上进行的,有可能是 Nginx,Apache, IIS 等, 需要在服务器的配置里,设置 Varyheader 为 Vary:Accept-Encoding, User-Agent
 
为了让百度蜘蛛更好识别是PC站还是移动站,方法如下:
 
代码放在<head>标签里面,如果是PC站,代码为:
 
<meta name="applicable-device"content="pc">
 
如果是移动站,代码为:
 
<meta name="applicable-device"content="mobile">
 
 
四、自动检测,JS代码实现跳转
 
方法1
 
<script>
if(navigator.platform.indexOf('Win32')!=-1){
//pc
window.location.href="PC端网站地址";
}else{
//手机
window.location.href="手机端网站地址";
}
</script>
 
 
方法2
 
<script type="text/javascript">
function browserRedirect() {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.href= '移动端网站地址';
} else {
window.location= 'PC端网站地址';
}
}
browserRedirect();
</script>
 
 
五、详细代码
 
1、移动端访问PC站点时自动跳转至移动站点
 
方法一: 百度Site APP的uaredirect.js 实现手机访问,自动跳转
<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/JavaScript">
</script>
<script type="text/javascript">uaredirect("http://********.com/m");</script>
 
要注意的是:该方法对于ipad不适用,依然会访问PC站点,亲测—> —>
 
 
方法二:使用navigator.platform 和navigator.appVersion 判 断
<script LANGUAGE="JavaScript">
 function mobile_device_detect(url)
 {
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
        {
 if(thisOS.match(os[i]))
        {  
  window.location=url;
 }          
 }
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)
        {
  window.location=url;
 }
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
  var check = navigator.appVersion;
  if( check.match(/linux/i) )
          {
   //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
   if(check.match(/mobile/i) || check.match(/X11/i))
                 {
   window.location=url;
   } 
 }
 //类in_array函数
 Array.prototype.in_array = function(e)
 {
  for(i=0;i<this.length;i++)
  {
   if(this[i] == e)
   return true;
  }
  return false;
 }
 }
mobile_device_detect("http://********.com/m");
</script>
代码中的http://********.com/m 为手机站点。
 
 
2、PC端访问移动站跳转PC站
 
<script type="text/javascript"> 
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) {        window.location.href = "PC端网站地址";  } 
else 
{}
</script>
 
 
 
我要咨询做网站
案例展示
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 022-82195810
    22123691
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

咨询送礼现在提交,将获得九牛科技策划专家免费为您制作
价值5880元《全网优化视频教程》一份!
下单送礼感恩五周年,新老用户下单即送惊喜大礼
咨询热线22123691
合作意向表
您需要的服务
您最关注的地方
预算

直接咨询