最新 iPhone 刘海屏设备信息整理 包含iPhone12 最新系列
使用css媒体查询
@mixin bangs {
@media only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3), //12 mini
only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3), // X Xs 11pro
only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3), // 12 12pro
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3), // Xsm 11promax
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2), //XR 11
only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) //12promax
{
@content;
}
}
使用js判断
function isBangs() {
const Iphone = /iphone/gi.test(window.navigator.userAgent) // 是否iphone机型
const Ratio2 = window.devicePixelRatio && window.devicePixelRatio === 2 // 像素比是否为2
const Ratio3 = window.devicePixelRatio && window.devicePixelRatio === 3 // 像素比是否为3
const Mini12 = window.screen.width === 360 && window.screen.height === 780 // 12mini
const Pro11 = window.screen.width === 375 && window.screen.height === 812 // X Xs 11pro
const Pro12 = window.screen.width === 390 && window.screen.height === 844 // 12 12pro
const Promax11 = window.screen.width === 414 && window.screen.height === 896 // Xsm XR 11 11promax
const Promax12 = window.screen.width === 428 && window.screen.height === 926 // 12promax
switch(true) {
case Iphone && Ratio3 && Mini12: // 12 mini
case Iphone && Ratio3 && Pro11: // X Xs 11pro
case Iphone && Ratio3 && Pro12: // 12 12pro
case Iphone && Ratio2 && Promax11: // XR 11
case Iphone && Ratio3 && Promax11: // Xsm 11promax
case Iphone && Ratio3 && Promax12: // 12promax
return true;
default:
return false
}
}
注意:
- 使用hubilderX内置的浏览器模拟器会判定false,因为它的devicePixelRatio恒为1。
- 使用微信开发者工具公众号开发工具也会判定false,因为它的window.screen.height会减去公众号默认的头部高度。