Added the parent class iphone-x for models iPhone 12, 12 Pro, 12 Pro Max

SonoIo · Nov 17, 2020 · 0b6da58 · 0b6da58
1 parent 0df5f46
commit 0b6da58
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,9 @@ Cross device utility for browser
 
 ## Changelog
 
+### 1.0.29
+- Added the parent class iphone-x for models iPhone 12, 12 Pro, 12 Pro Max
+
 ### 1.0.28
 - Standalone detect improved
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "device-utils",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "homepage": "https://github.com/SonoIo/device",
   "authors": [
     "Matteo Baggio",

diff --git a/lib/device.js b/lib/device.js
@@ -427,11 +427,53 @@ Device.isIphoneXSMax = function isIphoneXSMax(force){
 	return deviceCache.isIphoneXSMax;
 }
 
+Device.isIphone12 = function isIphone12(force){
+	if ( !force && _.isBoolean(deviceCache.isIphone12) )
+		return deviceCache.isIphone12;
+
+	var iOs = Device.isIos(force);
+	if (!iOs){
+		deviceCache.isIphone12 = false;
+		return false;
+	}
+
+	var dpr = _.isNumber(devicePixelRatio) && !_.isNaN(devicePixelRatio) ? devicePixelRatio : 1;
+	deviceCache.isIphone12 = screen.height * dpr == 2532; // @ref: https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
+
+	return deviceCache.isIphone12;
+}
+
+Device.isIphone12Pro = function isIphone12Pro(force){
+	if ( !force && _.isBoolean(deviceCache.isIphone12Pro) )
+		return deviceCache.isIphone12Pro;
+	deviceCache.isIphone12Pro = Device.isIphone12(force);
+	return deviceCache.isIphone12Pro;
+}
+
+Device.isIphone12ProMax = function isIphone12ProMax(force){
+	if ( !force && _.isBoolean(deviceCache.isIphone12ProMax) )
+		return deviceCache.isIphone12ProMax;
+
+	var iOs = Device.isIos(force);
+	if (!iOs){
+		deviceCache.isIphone12ProMax = false;
+		return false;
+	}
+
+	var dpr = _.isNumber(devicePixelRatio) && !_.isNaN(devicePixelRatio) ? devicePixelRatio : 1;
+	deviceCache.isIphone12ProMax = screen.height * dpr == 2778; // @ref: https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
+
+	return deviceCache.isIphone12ProMax;
+}
+
+
 Device.isIphoneWithNotch = function isIphoneWithNotch(force) {
 	return Device.isIphoneX(force)
 		|| Device.isIphoneXR(force)
 		|| Device.isIphoneXS(force)
-		|| Device.isIphoneXSMax(force);
+		|| Device.isIphoneXSMax(force)
+		|| Device.isIphone12Pro(force)
+		|| Device.isIphone12ProMax(force);
 }
 
 Device.isAndroid = function isAndroid(force){
@@ -679,6 +721,27 @@ Device.bind = function bind() {
 		});
 	}
 
+	if ( Device.isIphone12() ){
+		window.requestAnimationFrame(function(){
+			document.documentElement.classList.add('iphone-x');
+			document.documentElement.classList.add('iphone-12');
+		});
+	}
+
+	if ( Device.isIphone12Pro() ){
+		window.requestAnimationFrame(function(){
+			document.documentElement.classList.add('iphone-x');
+			document.documentElement.classList.add('iphone-12-pro');
+		});
+	}
+
+	if ( Device.isIphone12ProMax() ){
+		window.requestAnimationFrame(function(){
+			document.documentElement.classList.add('iphone-x');
+			document.documentElement.classList.add('iphone-12-pro-max');
+		});
+	}
+
 	if ( Device.isAndroid() ){
 		window.requestAnimationFrame(function(){
 			document.documentElement.classList.add('android');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "device-utils",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Cross device utils for browser",
   "main": "lib/device.js",
   "scripts": {