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

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>

应该是系统核心组件来识别的，核心组件决定了你的设备使用的浏览器版本（比如Windows版本、安卓版本、IOS版本、Linux版本等），它们虽然使用相同网络协议，但是即使相同数据传输情况下，各自数据包是有差别的。系统会根据自身以及浏览器版本进行自动优化和调整。是个很复杂的过程，不需要手动设置。

---