顾名思义本本文就是将如何一个网站手机版与PC版自适应跳转,关于PC、移动适配跳转的问题,这类情况一般出现在一个网站使用不同模板或PC网页和手机端网页分离时,利用代码将我们的网站实现自行跳转展示使用,我们提供了下面几种方法,请大家按需选择,合适自己的才是最好的。
一、js 判断手机版与PC版自适应跳转代码:
PC端判断代码:
<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";
var iurl = window.location.href;
var surl = iurl.substring(iurl.lastIndexOf('/'));
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.href= '手机版域名';
} else {
}
}
browserRedirect();
</script>
手机端判断代码:
<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";
var iurl = window.location.href;
var surl = iurl.substring(iurl.lastIndexOf('/'));
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
} else {
window.location.href= 'PC版域名';
}
}
browserRedirect();
</script>
二、PHP判断手机版与PC版自适应跳转代码:
//设定Mobile的定义
$mobileAgent = array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
//读取用户的浏览器资料
$browser = $_SERVER['HTTP_USER_AGENT'];
$isMobile = false;
//检查开始
foreach($mobileAgent as $search){
if(stristr($browser,$search)!=false){
$isMobile = true;
//echo $search;
//程式码(转址)
header("Location: 这里手机页面地址");
//停止运行程序
exit;
}
}
?>
二、手机端自适应屏幕跳转到指定的地址js代码:
<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 = 'https://www.qsyidai.com/m';break;
}
}
三、meta控制设备跳转代码:
<meta name="mobile-agent" content="format=html5;url=手机端域名">
说明:本方法前提是你需要做两套网站,很多知名站点都在使用,如芒果直播,一套是在pc端访问的(假如网址是m.mgtv.com),一套是在手机端访问的(假如网址是m.mgtv.com),这句就是判断如果你是在手机上打开的这个网站那就会打开m.mgtv.com这个网址,但是默认打开的是www.mgtv.com。
四、link控制设备跳转代码:
可用于link将PC版页面指向移动版页面或者将移动版页面指向PC版页面,这样有利于搜索引擎,可以对不同设备的用户提供不同类型的展示页面。
PC页面用alternative指向移动页面,代码如下:
<link rel="alternate" href="http://m.360mb.net/">
移动页面用canonical指向PC页面,代码如下:
<link rel="canonical" href="https://www.360mb.net/">
注:如果把“link”标签换成“meta”标签,页面并不会自动跳转,只是让搜索引擎知道PC对应的移动页面在哪,移动对应的PC页面在哪,这样来集中权重也更利于SEO。
1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定,不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益,请联系我们进行处理。
评论(0)