最近在给公司网站优化的时候发现,用电脑搜索关键词 天津网站制作 ,显示的是公司的移动网站的链接(出现这个问题,应该网站主页出问题了,权重没有手机端的高,这里先不讨论...
最近在给公司网站优化的时候发现,用电脑搜索关键词“
天津网站制作”,显示的是公司的移动网站的链接(出现这个问题,应该网站主页出问题了,权重没有手机端的高,这里先不讨论),这样打开以后显示的手机网站,用户体验不太好,于是小编在移动端加了一下识别跳转代码,这样用电脑打开以后,直接就跳转到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>