html如何检测判断设备是手机还是电脑,然后自动决定加载哪个CSS

html-css09

html如何检测判断设备是手机还是电脑,然后自动决定加载哪个CSS,第1张

1、首先准备一个HTML结构的文档,页面可以制作的简单点。

2、然后在页面的body区域中放置一个img图片。

3、我们先来运行一下页面,你会在页面中看到如下图所示的圆圈。

4、接下来我们就需要对页面进行CSS处理,如下图所示,给img图片添加样式,注意里面有旋转样式。

5、然后实现旋转的设置,这个是CSS3的新功能,主要是对图片进行旋转度数的设置。

6、最后运行程序,你会看到页面中的圆圈在不停的旋转,和我们平常看到的加载中的效果很像。

利用 html 和 css 实现不了,这个需要使用 js 来进行判断。 js 有 浏览器BOM 方法,window.navigator.userAgent 可以检测用户代理(即使用什么设备)通过这函数来进行检测,如果是 安卓或ios 系统则跳转到 移动端页面 否则跳转到 pc 端页面。<script type="text/javascript">function getBrowser(){ //判断浏览器是在android系统上还是在ios系统上if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.href = "web/index.html"//移动端页面}else{window.location.href="pc/index.html"//pc端页面}}getBrowser()</script>