当前位置：首页 > article >正文

网站自动识别使用设备

article 2024/9/23 17:51:36

现在有一个需求是，写了两组页面，进行渲染，一组是pc端，另外一组是移动端，要自动匹配当前设备进行渲染

解决方案

1.通过 navigator.userAgent来判断当前的设备

例子

<script>
  document.write("用户代理: " + navigator.userAgent);
</script>

在IE打开

用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0

在谷歌打开

用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

2.通过检测屏幕宽度来判断

<script>
  document.write("屏幕宽度: " + window.innerWidth);
</script>

屏幕宽度: 1396

具体解决

// 检测是否为移动设备
function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 检测屏幕宽度是否小于等于某个阈值（例如 768px）
function isMobileWidth() {
  return window.innerWidth <= 768;
}

export function isMobile() {
  return isMobileDevice() || isMobileWidth()
}

通过判断来决定请求不同的资源，来实现在不同的设备显示不同的页面

const QuestionAnswering = isMobile() ? () => import('@/h5/index.vue') : () => import('@/views/index.vue')
const ResourceCenter = isMobile() ? () => import('@/h5/View.vue') : () => import('@/views/View.vue')

当然还有一些别的方法，例如nginx上搞了一个detector，用于识别终端和设备类型。或者http协议的request headers中包含了user-agent这个key，获取这个key-value就可以判断是用什么访问了都可以实现，不过需要后端同学，帮一下忙了

查看全文

http://www.kler.cn/news/316383.html