本文是《推荐(共38篇)》专题的第 25 篇。阅读本文前,建议您先阅读前面的文章:
- 1.WordPress 短代码文章部分内容关注微信公众号后可见
- 2.WordPress用户名修改插件:Username Changer
- 3.WordPress自定义修改登陆后自动跳转到任意页面
- 4.B2主题文章内页点击展开更多 显示引导下载APP
- 5.B2主题网格样式文章鼠标悬浮弹出分类角标
- 6.B2主题菜单栏样式美化
- 7.B2主题 圈子首页加上轮播图
- 8.WordPress主题登录界面样式优化效果
- 9.B2主题网站侧边栏小工具添加一款好看的粒子当前时间
- 10.B2主题侧边栏信息统计小工具
- 11.B2主题美化之仿致美化页脚
- 12.WorePress安全检测GO内外链跳转页面html源码
- 13.WordPress实现内容加密模式/需要输入密码可见方法
- 14.WordPress给文章内容添加密码[WP教程]
- 15.WorePress复制网站文章内容弹窗提示+末尾自动添加版权信息
- 16.WordPress主题简约优雅GO外链页面
- 17.WordPress主题添加右侧悬浮导航
- 18.B2主题顶部随鼠标移动3D图片效果
- 19.WordPress用代码在文章内容加入微信关注后获取验证码可见
- 20.B2主题自带的语音播放失效了
- 21.B2 Pro主题文章创建内容目录
- 22.WordPress主题添加文章最后更新时间
- 23.WordPress可视化短代码简码
- 24.B2主题添加小工具炫酷倒计时
顾名思义本本文就是将如何一个网站手机版与PC版自适应跳转,关于PC、移动适配跳转的问题,这类情况一般出现在一个网站使用不同模板或PC网页和手机端网页分离时,利用代码将我们的网站实现自行跳转展示使用,我们提供了下面几种方法,请大家按需选择,合适自己的才是最好的。
一、js 判断手机版与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。
您已阅读完《推荐(共38篇)》专题的第 25 篇。您可以继续阅读该专题下面的文章: