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

Question

如何编写html来自动判断浏览网页的设备是手机还是电脑，然后根据检测判断的结果来决定加载手机页面用的CSS还是加载电脑页面用的CSS？

Answer 1

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

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

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

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

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

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

Answer 2

看上图我们可以知道目前分辨率的使用情况，

移动设备的分辨率高度最大不超过763 ， 宽度最大不超过 640，

然后我们这样写基本上就可以判断是移动设备  包括平板的，因为PC最小分辨率好像是800*600

@media screen and (max-device-width:641px) and (max-device-height:764px){ ... }

本回答被网友采纳

Answer 3

CSS3可以根据分辨率来识别设备类型，然后写相应的CSS代码：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { } 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { } 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { }

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { } 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { }

本回答被网友采纳

Answer 4

<!-[if AppleWebKit]>
<link rel="stylesheet" href="/手机.css" type="text/css" media="screen" />
<![endif]->
其中电脑版css不用注释，手机浏览器访问会自动识别！
亲亲动漫网77dm.us为您提供

Answer 5

html是无法检测，一般是用js、asp、php、.net或其他编程语言去检测http头信息或取得屏幕大小来判断。

百度：判断客户端