我们设计网页要想同时兼顾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"
}
```
name: Wayne's blog
link: https://wrans.top
avatar: https://cdn.staticaly.com/gh/wayne0926/myphoto@master/img/avatar.jpg
descr: 以梦为马,不负韶华。
```
信息如下:
站点名称:小陈博客
站点描述:理想成为大牛的小陈同学
站点网址:https://reinness.com
站点图片:https://qiniu.reinness.com/avatar.png
作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下,你只需要简单填写一下表单申请即可,我们会给作者提供包括流量、云服务器等,另外还有些周边礼物。