怎样解决PC端 和 wap 手机端的切换 项目是用html5和css/js 做的,并且代码是同一套代码,要求配置 m. 站点,做到 www. 和 m. 之间的切换
<script>
function detectmob() {
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
// window.location.href = "https://m.assist.re.k";
console.log('123');
} else {
// window.location.href = "https://wwww.assist.re.k";
console.log('123456');
}
}
detectmob()
</script>
控制台打印可以转换,但转换成网页时,m.网址不显示内容 (m网址是不是要后端去配置站点,我是直接写的网址名字)
大多数解决方案是先判断是否是手机wap端,是就跳转,不是就跳转PC端,但项目不是vue做的,解决方案较少
同一套代码实现 PC 到手机wap 端 的跳转
首先vue项目里面也是能运行原生js代码的,你现在的代码实现思路是没问题,前提是你要保证https://m.assist.re.k
是能直接访问的,如果访问不到,那你跳转过去不就是无用功吗
然后你在Vue里面应该如果兼容了pc和手机端的样式,那就不用再做其他的了,
第一步:你先保证这两个地址都能访问到内容https://wwww.assist.re.k,https://m.assist.re.k
第二步:这两个链接指向的资源地址都是你的项目地址,或者,你在服务器上建立两个文件夹,但是代码都是一套
$(function(){
// console.log(navigator.userAgent);
var os = function (){
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
}();
if (os.isAndroid || os.isPhone) {
alert("手机)
} else if (os.isTablet) {
// console.log("平板")
} else if(os.isPc) {
// console.log("电脑")
}
});
这个和是不是vue没多大直接关系,直接js判断下是否是手机,是就重定向,也就几句代码的事情,前端后台代码都可以做到
比如js判断(适配了比较常见的几种)
//判断浏览器类型
const isMobile = () => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|baiduboxapp/i.test(navigator.userAgent);
}
if(isMobile ()){
//跳转手机端
}else{
//pc端
}
是的,需要两个站点,两个地址是不同的