个人日记>正文
手机端和PC端分别加载不同的js客服代码
2024-01-24 15:57 gbl区分手机端和PC端其实方法很多,我们在响应式设计、响应式网站建设中经常碰到此类需求。下面说说我们在项目中遇到的需求:
手机端和PC端分别加载不同的js客服代码(注意:是要在PC和手机端分别加载不同的js文件)
下面我们来说说具体实现过程:
PC端截图如下:
手机端截图如下:
ok,代码测试成功。下面我们直接使用。无需封装到function,直接执行。
第一种方法(简单型):
<script type="text/javascript">
// 根据屏幕尺寸
if (screen && screen.width > 480) {
document.write('<script type="text/javascript" charset="utf-8" src="https://www.0937.biz/20001472/10059435.js"><\/script>');
}
// userAgent判断
if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){
document.write('<script type="text/javascript" charset="utf-8" src="https://www.0937.biz/20001472/10059911.js"><\/script>');
}
</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";
// document.writeln("您的浏览设备为:");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
// alert("手机浏览!");
document.write('<script type="text/javascript" charset="utf-8" src="https://www.0937.biz/20001472/10059911.js"><\/script>');
} else {
// alert("PC浏览!");
document.write('<script type="text/javascript" charset="utf-8" src="https://www.0937.biz/20001472/10059435.js"><\/script>');
}
}
browserRedirect();
</script>
这样子我们直接在PC端和手机端分别输出不同的js。所以,我们在手机端和PC端分别加载不同的js的需求完美解决了。
本文链接:https://www.0937.biz/post-3179.html
- 上一篇:183愿主工兴旺
- 下一篇:两招教你获取浏览器用户代理(user-agent)
猜你喜欢
- 2024-01-24 中国大陆IP段(含港澳)【2024-10-10】APNIC lasted 2024-10-10
- 2024-01-24 install.sh: 行 330: curl: 未找到命令
- 2024-01-24 百度移动端跳转代码
- 2024-01-24 【Rust Desk】手搓一个远程桌面软件,完全取代 向日葵、ToDesk!
- 2024-01-24 centos 7 安装tailscale步骤
- 2024-01-24 中国大学排名前20的大学 并标注公立或私立
- 2024-01-24 美国所有大学排名 并标注公立或私立
- 2024-01-24 Windows 11创建本地账户
- 2024-01-24 开启win10下Ubuntu子系统的SSH服务 并设置为开机启动
- 图文推荐
- 热门标签