adds iPhone 6 media queries

herereadthis · Sep 18, 2014 · 6c53701 · 6c53701
1 parent da4c1fd
commit 6c53701
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -256,12 +256,13 @@ Notice how the LESS/SASS variable names of the media queries just became very ea
 | ---- | ---- | ---- | ---- | ---- | ---- |
 | 768 WXGA:2 | 768×1280 | 2| 384×640 | 2:3 | Google Nexus 4 |
 | 720 HD:2 | 720×1280 | 2| 360:640 | 9:16 | Blackberry Z30; Motorola Droid Maxx, Razr HD; Samsung GN2; Sony Xperia S |
-| 1080 HD:2 | 1080×1920 | 2 | 560×960 | 9:16 | Samsung GN3 |
+| 1080 HD:2 | 1080×1920 | 2 | 560×960 | 9:16 | Samsung GN3; iPhone 6 Plus |
 | 1080 HD:3 | 1080×1920 | 3 | 360×640 | 9:16 | Google Nexus 5; HTC Hero M7+; LG G2; Samsung GS4+; Sony Xperia Z1+ |
 | WQHD:4 | 1440×2560 | 4 | 360×640 | 9:16 | LG G3 |
 | early iPhone | 320×480 | 1 | 320×480 | 2:3 | iPhone 1-3 |
-| iPhone 4(s) | 640×960 | 1 | 320×480 | 2:3 | iPhone 4(s) |
-| late iPhone | 640×1136 | 1 | 320×568 | 9:16 | iPhone 5(s)(c) |
+| iPhone 4 | 640×960 | 2 | 320×480 | 2:3 | iPhone 4(s) |
+| iPhone 5 | 640×1136 | 2 | 320×568 | 9:16 | iPhone 5(s)(c) |
+| iPhone 6 | 750×1334 | 2 | 375×667 | 9:16 | iPhone 6 |
 | early iPad | 768×1024 | 1 | 768×1024 | 3:4 | iPad 1-2; iPad Mini 1 |
 | retina iPad | 1536×2056 | 2 | 768×1024 | 3:4 | iPad 3+; iPad Air; iPad Mini 2 |
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "bellmaker",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "authors": [
     {
       "name": "Jimmy Ha",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bellmaker",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints",
   "main": "index.html",
   "scripts": {

diff --git a/src/less/mixins_variables.less b/src/less/mixins_variables.less
@@ -78,7 +78,7 @@
 // Actual Resolution: 1080 X 1920
 // Display Resolution: 360 X 640
 // Device-pixel-ratio: 2
-// 1080 HD:2 phones: Samsung GN3
+// 1080 HD:2 phones: Samsung GN3, iPhone 6 Plus
 @ds_full_hd2:               ~"only screen and (min-device-width : 540px) and (max-device-width : 960px) and (min-resolution: 2dppx)";
 // 1080 HD:2 phones in landscape
 @ds_full_hd2_landscape:     ~"only screen and (min-device-width : 540px) and (max-device-width : 960px) and (min-resolution: 2dppx) and (orientation : landscape)";
@@ -175,6 +175,17 @@
 // iPhone 5 in portrait
 @ds_iphone_5_portrait:      ~"only screen and (min-device-width : 320px) and (max-device-width : 568px) and (min-resolution: 2dppx) and (orientation : portrait)";
 
+
+// Actual Resolution: 375 X 667
+// Display Resolution: 750 X 1334
+// Device-pixel-ratio: 2
+// iPhone 6 in portrait & landscape
+@ds_iphone_6:               ~"only screen and (min-device-width : 375px) and (max-device-width : 667px) and (min-resolution: 2dppx)";
+// iPhone 6 in landscape
+@ds_iphone_6_landscape:     ~"only screen and (min-device-width : 375px) and (max-device-width : 667px) and (min-resolution: 2dppx) and (orientation : landscape)";
+// iPhone 6 in portrait
+@ds_iphone_6_portrait:      ~"only screen and (min-device-width : 375px) and (max-device-width : 667px) and (min-resolution: 2dppx) and (orientation : portrait)";
+
 // ---------------------------------------------
 // ---------------------------------------------
 

diff --git a/src/sass/_mixins_variables.scss b/src/sass/_mixins_variables.scss
@@ -78,7 +78,7 @@ $ds_720p_hd2_portrait:      "only screen and (min-device-width : 360px) and (max
 // Actual Resolution: 1080 X 1920
 // Display Resolution: 360 X 640
 // Device-pixel-ratio: 2
-// 1080 HD:2 phones: Samsung GN3
+// 1080 HD:2 phones: Samsung GN3, iPhone 6 Plus
 $ds_full_hd2:               "only screen and (min-device-width : 540px) and (max-device-width : 960px) and (min-resolution: 2dppx)";
 // 1080 HD:2 phones in landscape
 $ds_full_hd2_landscape:     "only screen and (min-device-width : 540px) and (max-device-width : 960px) and (min-resolution: 2dppx) and (orientation : landscape)";
@@ -175,6 +175,16 @@ $ds_iphone_5_landscape:     "only screen and (min-device-width : 320px) and (max
 // iPhone 5 in portrait
 $ds_iphone_5_portrait:      "only screen and (min-device-width : 320px) and (max-device-width : 568px) and (min-resolution: 2dppx) and (orientation : portrait)";
 
+
+// Actual Resolution: 375 X 667
+// Display Resolution: 750 X 1334
+// Device-pixel-ratio: 2
+// iPhone 6 in portrait & landscape
+$ds_iphone_6:               "only screen and (min-device-width : 375px) and (max-device-width : 667px) and (min-resolution: 2dppx)";
+// iPhone 6 in landscape
+$ds_iphone_6_landscape:     "only screen and (min-device-width : 375px) and (max-device-width : 667px) and (min-resolution: 2dppx) and (orientation : landscape)";
+// iPhone 6 in portrait
+$ds_iphone_6_portrait:      "only screen and (min-device-width : 375px) and (max-device-width : 667px) and (min-resolution: 2dppx) and (orientation : portrait)";
 // ---------------------------------------------