js判断PC端移动端

我们设计网页要想同时兼顾PC端和移动端,要么通过响应式布局,要么单独设计PC和移动端的页面

而后者需要先判断设备是什么,然后再通过 windows.location.href 打开对应的页面

下面提供两种区分设备的方法

第一种是通过 navigator 对象的 userAgent 属性判断,它会返回浏览器的user-agent信息

if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    location.href = "./mobile/index.html"
} else {
    location.href = "./pc/index.html"
}

第二种则是直接通过获取浏览器的可用宽度来区分

if (window.screen.availWidth < 750) {
    location.href = "./mobile/index.html"
} else {
    location.href = "./pc/index.html"
}

评论区
头像
文章目录