首页 > 开发 > CSS > 正文

使用CSS媒体查询和JavaScript判断浏览器设备类型的好方法

2024-07-11 08:52:39

字体：大中小

来源：转载

供稿：网友

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中，我发现使用CSS媒体查询(media queries)虽然非常的有效，但有时，JavaScript却不能及时知道用户浏览设备的状态。浏览网站的用户使用的是桌面电脑，还是平板，还是手机？这对于CSS来说很容易，但CSS却无法将这些信息告诉JavaScript。我发明了一种基于CSS媒体查询和z-index属性的方法，能告诉JavaScript用户当前使用的是什么屏幕，这样我能调整JavaScript的动作来响应这种屏幕尺寸。

CSS代码

首先最重要的还是CSS媒体查询代码。这里只是示例，我们创建了三个媒体查询规则(但不包括缺省的“all”)，它能控制四种屏幕情况：桌面(这是缺省状态，不需要媒体查询规则)，“小屏幕”，平板，手机。针对每一种屏幕，我们给它一种不同的z-index值，这个值我们可以用JavaScript检测到。我们把这个元素定位到屏幕外，这样它就不会显示出来；记住，它的作用就是存放z-index值，我们要用javaScript获取这个值。

复制代码

上一篇：css3实现input输入框颜色渐变发光效果代码

下一篇：CSS图片翻转动画技术详解（IE也实现了）

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注