iPhoneX和Notch检测 [英] iPhoneX and Notch detection
问题描述
使用Javascript;如何检查用户设备是否为iPhoneX?
Using Javascript; how can I check if the users device is an iPhoneX?
此外,如何确定横向位置时iPhone的缺口位置是什么?
Also, how can I determine what side the iPhones' 'notch' is positioned when in the landscape orientation?
有一些很棒的文章: https:// webkit。 org / blog / 7929 / designing-websites-for-iphone-x /
...但这些往往会利用尖端功能在撰写本文时,许多移动浏览器都不支持本机。
... but these tend to take advantage of cutting-edge features that aren't natively supported in many mobile browsers at the time of writing this.
推荐答案
所以我想出了一种用Javascript检测iPhoneX的方法。我的流程还会根据用户设备方向检查Notch的位置:
https://codepen.io/marknotton/pen/NwpgBK
(function(window){
// Really basic check for the ios platform
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Get the device pixel ratio
var ratio = window.devicePixelRatio || 1;
// Define the users device screen dimensions
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
// iPhone X Detection
if (iOS && screen.width == 1125 && screen.height === 2436) {
// Set a global variable now we've determined the iPhoneX is true
window.iphoneX = true;
// Adds a listener for ios devices that checks for orientation changes.
window.addEventListener('orientationchange', update);
update();
}
// Each time the device orientation changes, run this update function
function update() {
notch();
iphoneXChecker();
}
// Notch position checker
function notch() {
var _notch = '';
if( 'orientation' in window ) {
// Mobile
if (window.orientation == 90) {
_notch = 'left';
} else if (window.orientation == -90) {
_notch = 'right';
}
} else if ( 'orientation' in window.screen ) {
// Webkit
if( screen.orientation.type === 'landscape-primary') {
_notch = 'left';
} else if( screen.orientation.type === 'landscape-secondary') {
_notch = 'right';
}
} else if( 'mozOrientation' in window.screen ) {
// Firefox
if( screen.mozOrientation === 'landscape-primary') {
_notch = 'left';
} else if( screen.mozOrientation === 'landscape-secondary') {
_notch = 'right';
}
}
window.notch = _notch;
}
})(window);
// Bespoke functions:
// The above functions have no jQuery Dependencies.
// The below code uses jQuery solely for this quick demo.
if ( window.iphoneX === true ) {
$('body').addClass('iphoneX');
}
function iphoneXChecker() {
if (window.notch == 'left') {
$('body').removeClass('notch-right').addClass('notch-left');
} else if (window.notch == 'right') {
$('body').removeClass('notch-left').addClass('notch-right');
} else {
$('body').removeClass('notch-right notch-left');
}
}
我不禁觉得这只是小黑客的组合。你可能会注意到;我的Javascript并不完全符合高标准,我确信有更好/更清洁的方法来做到这一点。
I can't help but feel like this is just a combination of little hacks. As you'll probably notice; my Javascript isn't exactly to a high standard and I'm sure there are better/cleaner ways to do this.
我很乐意收到我未考虑的问题的反馈和解决方案。
I'd be very happy to receive feedback and solutions to issues I've not considered.
如果你只想检查iPhoneX(忽略Notch),这应该可以完成这项工作:
https:// codepen。 io / marknotton / pen / MOpodJ
(function(){
// Really basic check for the ios platform
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// Get the device pixel ratio
var ratio = window.devicePixelRatio || 1;
// Define the users device screen dimensions
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
// iPhone X Detection
if (iOS && screen.width == 1125 && screen.height === 2436) {
alert('iPhoneX Detected!');
}
})();
这篇关于iPhoneX和Notch检测的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!