哥们儿在咱们干项目的时候，经常会用到响应式布局？这样无论是电脑还是手机上都能看得到。像Bootstrap这些神器就能帮助我们。但是，手机上某些功能可能需要精简下哈。这时候，咱们就得写出两套代码，分为PC端跟手机端。最后再把它们合二为一，只输出一个网址就行，省得咱分两次搞。那咋才能让系统自个儿识别屏幕尺寸，然后自动切出去应的那部分代码？
这下可真麻烦了，搞不定就要出大事。不过，我倒是想出来一个方法：就是把电脑和手机的程序代码合二为一，至于其他的方法嘛…还等着你们给支招儿。再者说我必须感谢那个帮了我大忙的那位朋友！
搞定起来超简单只需将这段代码放在手机和电脑上都有的Common.js里面，再填写下相应的路径就搞定了。手机的Common.js就是这么回事儿，PC端也是那么回事儿哟~
function mobilePcRedirect() {
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= '手机端跳转页面URL';
} else {
window.location= 'PC端跳转页面URL';
}
};
mobilePcRedirect();
有个事说下那就是咋找出项目的根目录呀？可不是小菜一碟虽然看看项目名称和完整路径挺容易，但实际上不太好搞定。
行啦行，关于怎么找项目根路径这儿，我得给大家普及下。其实，就是把项目名跟全路径搞定就可以了，这样以后用起来省事儿不少，各种需求都不怕了。
// 实现网站自动跳转电脑PC端与手机端不同页面
function mobilePcRedirect() {
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) {
console.log("手机端跳转页面URL");
} else {
console.log("PC端跳转页面URL");
// 注：此时写入的是PC端首页跳转路径
window.location.href = getBasePath() + "/education/new_index.html";
}
};
mobilePcRedirect();
简单说说呗？有啥妙招就分享一下咯，我们一起来提升！
好了好了，没事儿我就先走咯！希望这些建议对你有帮助也别忘了常来玩儿呐！NT加油
来了，揭晓答案！就是说咱们可以通过看视口中的像素点换代码，这个技能真心好使！记住咯，得记住这个！咱今天就说到这里了，祝愿大家能够喜欢哟~记得要来跟我聊聊天分享出去让更多人知道也挺不错！多谢各位捧场！
/**
* 获取项目名称 如：/video_learning
**/
function getProjectName() {
var strPath = window.document.location.pathname;
var postPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
return postPath;
}
评论0