针对iPhone刘海屏的scss媒体查询封装

最新 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
	}
}

注意：

1. 使用hubilderX内置的浏览器模拟器会判定false，因为它的devicePixelRatio恒为1。
2. 使用微信开发者工具公众号开发工具也会判定false,因为它的window.screen.height会减去公众号默认的头部高度。