CSS和JavaScript怎么判断浏览器设备类型

这篇文章主要讲解了“CSS和JavaScript怎么判断浏览器设备类型”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS和JavaScript怎么判断浏览器设备类型”吧！

CSS代码

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

代码如下:

/* 缺省屏幕 */
.state-indicator {
position: absolute;
top: -999em;
left: -999em;
z-index: 1;
}
/* 小屏幕 */
@media all and (max-width: 1200px) {
.state-indicator {
z-index: 2;
}
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator {
z-index: 3;
}
}
/* 手机 */
@media all and (max-width: 768px) {
.state-indicator {
z-index: 4;
}
}

每种z-index都在告诉我们的JavaScript当前的用户使用的是什么规格的屏幕。我们并不像知道用户究竟使用的是什么设备，因为你可以将浏览器宽度拉的很窄，但我们需要就是可视宽度，这样我们可以调整应用的布局。

JavaScript代码

也许你认为可以在DomContentLoaded时知道屏幕的大小，但我们需要实时知道屏幕的大小(因为用户会调整浏览器窗口的大小)，我们需要有个方法获取当前窗口的属性：

代码如下:

// 创建状态指示元素
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
// 获取设备类别的方法
function getDeviceState() {
return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}

使用这个方法，你就能检测出页面布局/js饰件中那些需要显示，那些需要隐藏。

代码如下:

if(getDeviceState() < 3) { // 如果是桌面电脑后小屏幕电脑
// 显示js饰件....
}

有人也许会认为这些数字太容易搞错，让代码很难维护。其实我们可以用一个对象来处理这种事情：

代码如下:

function getDeviceState() {
var index = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
var states = {
2: 'small-desktop',
3: 'tablet',
4: 'phone'
};
return states[index] || 'desktop';
}

这样，你就一个写出更具可读性的逻辑判断：

代码如下:

if(getDeviceState() == 'tablet') {
// Do whatever
}

也许使用CSS的伪元素的content属性是个更好的方法：

代码如下:

.state-indicator {
position: absolute;
top: -999em;
left: -999em;
}
.state-indicator:before { content: 'desktop'; }
/* 小屏幕桌面 */
@media all and (max-width: 1200px) {
.state-indicator:before { content: 'small-desktop'; }
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator:before { content: 'tablet'; }
}
/* 手机 */

用下面的JavaScript方法获取关键的内容：

代码如下:

var state = window.getComputedStyle(
document.querySelector('.state-indicator'), ':before'
).getPropertyValue('content')

如何组织这些代码全看你自己了。如果你有一个全局对象，例如window.config或window.app等，你可以把这些方法放到里面。我倾向于模块化这些功能，你可以把它做成jQuery插件或JavaScript工具包。不管你如何实现，它们都是你可以信赖的、简单易用的检测用户设备的好方法。

更上一层楼

我们知道屏幕尺寸会发生变化&mdash;&mdash;用户手工调整浏览器大型或手机用户调整了手机方向，所以，当这些事件发生时，我们需要让系统告诉我们。下面这段简单的代码估计是你需要的：

代码如下:

var lastDeviceState = getDeviceState();
window.addEventListener('resize', debounce(function() {
var state = getDeviceState();
if(state != lastDeviceState) {
// 保持当前的状态
lastDeviceState = state;
// 宣告状态变化，通过自定义的DOM事件或JS 消息发布/订阅模式，
// 我喜欢后者，所有就假设使用了一个这样的工具库
publish('/device-state/change', [state]);
}
}, 20));
// 用法
subscribe('/device-state/change', function(state) {
if(state == 3) { // or "tablet", if you used the object
}
});

注意，这里我使用了debounce方法来执行resize事件发生时的动作&mdash;&mdash;这对于性能来说非常重要。是使用自定义DOM事件还是使用发布/订阅模式，你自由选择，因为都很简单。

我觉得这种方法非常的好。有人可能会指出使用matchMedia也可以有相同效果，但问题是你需要在CSS里和JavaScript里都使用媒体查询，而有些媒体查询语句可能会很复杂，甚至会成为你的噩梦，不如使用简单的z-index。也有人会说可以使用 window.innerWidth来判断，但这样JS里获取的属性和CSS里的媒体查询就需要相互转换了，同样也会成为你的恶魔。我的方法的好处就在于你可以用它判断其他类型的媒体查询属性，例如检查手机是横向(landscape)还是竖向(portrait)。

感谢各位的阅读，以上就是“CSS和JavaScript怎么判断浏览器设备类型”的内容了，经过本文的学习后，相信大家对CSS和JavaScript怎么判断浏览器设备类型这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！