javascript iPhoneX 和 Notch 检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47226824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhoneX and Notch detection
提问by Mark Notton
Using Javascript; how can I check if the users device is an iPhoneX?
使用Javascript；如何检查用户设备是否为 iPhoneX？
Also, how can I determine what side the iPhones' 'notch' is positioned when in the landscape orientation?
另外，如何确定 iPhone 的“缺口”在横向时位于哪一侧？
There are some great articles out there: https://webkit.org/blog/7929/designing-websites-for-iphone-x/
有一些很棒的文章：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.
...但这些往往会利用在撰写本文时许多移动浏览器本身不支持的尖端功能。
回答by Mark Notton
So I've come up with a method of detecting the iPhoneX with Javascript. My process also checks for the position of the Notch depending on the users device orientation:
所以我想出了一种用 Javascript 检测 iPhoneX 的方法。我的过程还根据用户设备方向检查 Notch 的位置：
https://codepen.io/marknotton/pen/NwpgBK
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');
}
}
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.
我不禁觉得这只是一些小技巧的组合。你可能会注意到；我的 Javascript 并不完全符合高标准，我相信有更好/更干净的方法来做到这一点。
I'd be very happy to receive feedback and solutions to issues I've not considered.
我很高兴收到我没有考虑过的问题的反馈和解决方案。
If you just want to check for the iPhoneX (ignoring the Notch), this should do the job:
如果您只想检查 iPhoneX（忽略 Notch），这应该可以：
https://codepen.io/marknotton/pen/MOpodJ
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!');
}
})();
回答by StelArian
iPhone X and 11 have 9:19.5 aspect ratio:
iPhone X 和 11 的纵横比为 9:19.5：
9 / 19.5 = 0.4615384615.toFixed(3) = "0.462"
Let's try this on all iPhone X and 11 using window.screen.
让我们在所有 iPhone X 和 11 上使用window.screen.
X, Xs, Xs Max (Display Zoom: Zoomed), 11 Pro, 11 Pro Max (Display Zoom: Zoomed):
X、Xs、Xs Max（显示缩放：缩放）、11 Pro、11 Pro Max（显示缩放：缩放）：
375 / 812 = 0.4618226601.toFixed(3) = "0.462"
Xs Max (Display Zoom: Standard), XR, 11, 11 Pro Max (Display Zoom: Standard):
Xs Max（显示缩放：标准）、XR、11、11 Pro Max（显示缩放：标准）：
414 / 896 = 0.4620535714.toFixed(3) = "0.462"
So...
所以...
let iPhone = /iPhone/.test(navigator.userAgent) && !window.MSStream
let aspect = window.screen.width / window.screen.height
if (iPhone && aspect.toFixed(3) === "0.462") {
// I'm an iPhone X or 11...
}
Please keep in mind, window.screenalways return sizes in portrait, regardless active device orientation.
请记住，window.screen无论活动设备方向如何，始终以纵向返回尺寸。
