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

html-css06

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

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

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

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

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

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

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

一个是媒体查询，但是这个只能判断尺寸，并不能判断是不是移动设备。

再用就是使用js控制

    /**

     * 判断是够是pc设备

     */

    function IsPC() {

        var userAgentInfo = navigator.userAgent

        var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone", "iPod"]

        var flag = true

        for (var v = 0 v < Agents.length v++) {

            if (userAgentInfo.indexOf(Agents[v]) > 0) {

                flag = false

                break

            }

        }

        if(window.screen.width>=768){

             flag = true

        }

        return flag

    }