同个前端页面,在手机端和PC端打开,访问到的资源有可能不是同一个


记录项目遇到的问题,问题表现为:

1、用手机端和PC端打开同一个前端页面,通讯到达的后端服务却不是同一个

排查:

1、确认手机端和PC端打开后,实际访问的前端资源并不是同一个

2、手机端配置的socket端口有误,所以没有到达正确的后端服务


一、例

1、前端页面访问地址:http://127.0.0.1:8229/xxx/index_websocket.html

2、在PC端打开,实际访问到的是:index_websocket.html

3、在手机端打开,实际访问到的是:index_app.html

4、通过查看前端代码,手机端打开时的跳转页面是可以自己定义的,案例代码如下

function getPgjs(){
	var agent = navigator.userAgent.toLowerCase();
	var res = agent.match(/android/);
	if(res == "android")
		return 'android';
	res = agent.match(/iphone/);
	if(res == "iphone")
		return "iphone";
	res = agent.match(/ipad/);
	if(res == "ipad")
		return "ipad";
	res = agent.match(/windows/);
	if(res == "windows")
		return "wp";
	return "pc";
}
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || getPgjs() == 'ipad') {
	//wap
	var questionMsg = decodeURI(getQueryString('question'));//带入问题并且中文转码
	if(questionMsg){
		window.location.href = "./index_app.html?question="+questionMsg;
	}else{
		window.location.href = "./index_app.html";
	}
    
} else {
	//pc
}
 var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
    if (Sys.ie){
		if(Sys.ie<10.0){
			var questionMsg = decodeURI(getQueryString('question'));//带入问题并且中文转码
			if(questionMsg){
				window.location.href = "./index_socket.html?question="+questionMsg;
			}else{
				window.location.href = "./index_socket.html";
			}
		}
	}

二、知识点

通讯方面

1、手机端的通讯,可以是Socket、HTTP

2、PC端的通讯,可以是WebSocket、Socket、HTTP

3、查看Socket、HTTP通信信息
在这里插入图片描述
 
4、查看websocket通信信息
在这里插入图片描述


问题的定位

1、出现问题时,先确认PC端、手机端各自的通讯配置是否有误,确保消息的通讯能到达正确的后端服务

2、PC端应检查:WebSocket、Socket、HTTP等配置的地址及端口号

3、手机端应检查:Socket、HTTP等配置的地址及端口号


在PC端以手机模式打开并调试前端页面

1、在浏览器输入需要调整的前端页面访问地址

2、按F12进入开发者调试页面

3、点击以下按钮就能以手机模式访问该前端页面
在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值