如何使用Javascript检查用户的设备是否为iPhoneX?
同时,在横屏模式下,如何确定iPhone的“刘海”在哪一侧?
有一些很棒的文章:https://webkit.org/blog/7929/designing-websites-for-iphone-x/
但是,这些文章往往利用了许多移动浏览器目前不支持的最新功能。
如何使用Javascript检查用户的设备是否为iPhoneX?
同时,在横屏模式下,如何确定iPhone的“刘海”在哪一侧?
有一些很棒的文章:https://webkit.org/blog/7929/designing-websites-for-iphone-x/
但是,这些文章往往利用了许多移动浏览器目前不支持的最新功能。
所以我用Javascript想出了一种检测iPhoneX的方法。我的过程还根据用户设备的方向检查凸槽的位置:
https://codepen.io/marknotton/pen/NwpgBK
(function(window){
// Really basic check for the ios platform
// https://dev59.com/EGox5IYBdhLWcg3wr2To
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水平并不高,我相信有更好/更干净的方法来实现这个。
如果您有任何反馈或解决我没有考虑的问题的解决方案,我会非常高兴。
如果您只想检查iPhoneX(忽略刘海屏),则应该可以使用此代码:
https://codepen.io/marknotton/pen/MOpodJ
(function(){
// Really basic check for the ios platform
// https://dev59.com/EGox5IYBdhLWcg3wr2To
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!');
}
})();
iPhone X 和 11 的屏幕长宽比为9:19.5:
9 / 19.5 = 0.4615384615.toFixed(3) = "0.462"
我们尝试在所有 iPhone X 和 11 上使用 window.screen
。
X,Xs,Xs Max(显示缩放:缩小),11 Pro,11 Pro Max(显示缩放:缩小):
375 / 812 = 0.4618226601.toFixed(3) = "0.462"
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...
}
window.screen
总是返回纵向的尺寸,无论设备当前方向如何。