上面示例中,如果屏幕宽度window.screen.width
小于500像素,就认为是手机。
这个方法的缺点在于,如果手机横屏使用,就识别不了。
另一个属性window.innerWidth
返回浏览器窗口里面的网页可见部分的宽度,比较适合指定网页在不同宽度下的样式。
const getBrowserWidth = function() {
if (window.innerWidth < 768) {
return "xs";
} else if (window.innerWidth < 991) {
return "sm";
} else if (window.innerWidth < 1199) {
return "md";
} else {
return "lg";
}
};
三、window.orientation
第三种方法是侦测屏幕方向,手机屏幕可以随时改变方向(横屏或竖屏),桌面设备做不到。
window.orientation
属性用于获取屏幕的当前方向,只有移动设备才有这个属性,桌面设备会返回undefined
。
if (typeof window.orientation !== ‘undefined’) {
// 当前设备是移动设备
}
注意,iPhone 的 Safari 浏览器不支持该属性。
四、touch 事件
第四种方法是,手机浏览器的 DOM 元素可以通过ontouchstart
属性,为touch
事件指定监听函数。桌面设备没有这个属性。
function isMobile() {
return (‘ontouchstart’ in document.documentElement);
}
// 另一种写法
function isMobile() {
try {
document.createEvent("TouchEvent"); return true;
} catch(e) {
return false;
}
}
五、window.matchMedia()
最后一种方法是结合 CSS 来判断。
CSS 通过 media query(媒介查询)为网页指定响应式样式。如果某个针对手机的 media query 语句生效了,就可以认为当前设备是移动设备。
window.matchMedia()
方法接受一个 CSS 的 media query 语句作为参数,判断这个语句是否生效。
let isMobile = window.matchMedia(“only screen and (max-width: 760px)”).matches;
上面示例中,window.matchMedia()
的参数是一个 CSS 查询语句,表示只对屏幕宽度不超过 700 像素的设备生效。它返回一个对象,该对象的matches
属性是一个布尔值。如果是true
,就表示查询生效,当前设备是手机。
除了通过屏幕宽度判断,还可以通过指针的精确性判断。
let isMobile = window.matchMedia(“(pointer:coarse)”).matches;
上面示例中,CSS 语句pointer:coarse
表示当前设备的指针是不精确的。由于手机不支持鼠标,只支持触摸,所以符合这个条件。
有些设备支持多种指针,比如同时支持鼠标和触摸。pointer:coarse
只用来判断主指针,此外还有一个any-pointer
命令判断所有指针。
let isMobile = window.matchMedia(“(any-pointer:coarse)”).matches;
上面示例中,any-pointer:coarse
表示所有指针里面,只要有一个指针是不精确的,就符合查询条件。
六、工具包
除了上面这些方法,也可以使用别人写好的工具包。这里推荐 react-device-detect,它支持多种粒度的设备侦测。
后话
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。