有几种方法可以检测用户手机是否是iPhone X,包括CSS @media只针对这个特定的设备,但是现在(2018年底)的Android有 so many models already shipping 和 cutout/notch
.
我整天都在谷歌,但没有发现如何检测用户设备是否有 cutout/notch
,(特别是在Android上) .
有人解决了吗?
我在JS / jQuery上寻找跨浏览器的东西,这是我用于iPhone X的东西:
(function(window){
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var ratio = window.devicePixelRatio || 1;
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
if (iOS && screen.width == 1125 && screen.height === 2436) {
window.iphoneX = true;
window.addEventListener('orientationchange', update);
update();
}
function update() {
notch();
iphoneXChecker();
}
function notch() {
var _notch = '';
if( 'orientation' in window ) {
if (window.orientation == 90) {
_notch = 'left';
} else if (window.orientation == -90) {
_notch = 'right';
}
} else if ( 'orientation' in window.screen ) {
if( screen.orientation.type === 'landscape-primary') {
_notch = 'left';
} else if( screen.orientation.type === 'landscape-secondary') {
_notch = 'right';
}
} else if( 'mozOrientation' in window.screen ) {
if( screen.mozOrientation === 'landscape-primary') {
_notch = 'left';
} else if( screen.mozOrientation === 'landscape-secondary') {
_notch = 'right';
}
}
window.notch = _notch;
}
})(window);
代码信用@Mark Notton