From 0c00cb9453e6007f6ac16ead047e0c823ace9e0d Mon Sep 17 00:00:00 2001 From: cozyop Date: Sun, 18 Dec 2022 21:45:31 -0500 Subject: [PATCH 1/3] fixing iPhone 5, 5s, 6, 6s, 7, 8, and metric --- css/--inch.css | 17 +++++------------ css/devices.css | 2 +- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/css/--inch.css b/css/--inch.css index 8c2d3ee..b0bd60b 100644 --- a/css/--inch.css +++ b/css/--inch.css @@ -79,19 +79,12 @@ } /* iPhone 6 */ -@media (device-width: 375px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { +@media (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { :root { - --inch: 430px; - } -} - -@media (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { - :root { - --inch: 242px; + --inch: 189px; } } - /****************/ /* TABLET ZONE */ /****************/ @@ -148,9 +141,9 @@ :root { /* Do not --inch variable here. Doing so will break the cascade. */ - --centimeters: calc(2.54 * var(--inch)); - --millimeters: calc(25.4 * var(--inch)); - --meters: calc(2.54 * var(--inch) / 100); + --centimeters: calc(1 / 2.54 * var(--inch)); + --millimeters: calc(1 / 0.254 * var(--inch)); + --meters: calc(1 / 2.54 * var(--inch) * 100); --feet: calc(12 * var(--inch)); --thou: calc(var(--inch) / 1000); } diff --git a/css/devices.css b/css/devices.css index bd40e40..dad06cd 100644 --- a/css/devices.css +++ b/css/devices.css @@ -17,7 +17,7 @@ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { :root { - --inch: 116px; + --inch: 162px; } } From b8ea07ff9d846d99808dcde5b03eb37c50d5c462 Mon Sep 17 00:00:00 2001 From: cozyop Date: Sun, 18 Dec 2022 21:57:08 -0500 Subject: [PATCH 2/3] iphone 6, 6s, 7, 8 --- css/devices.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/devices.css b/css/devices.css index dad06cd..96be949 100644 --- a/css/devices.css +++ b/css/devices.css @@ -28,7 +28,9 @@ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { - :root { } + :root { + --inch: 189px; + } } From 7a4cba9c2ff3829559316577604c86d4c0ee6257 Mon Sep 17 00:00:00 2001 From: cozyop Date: Tue, 20 Dec 2022 02:06:30 -0500 Subject: [PATCH 3/3] all the current iphones and ipads --- css/--inch.css | 117 +++++++++++++++++++++++++++++++++++++++++------- css/devices.css | 60 +------------------------ 2 files changed, 101 insertions(+), 76 deletions(-) diff --git a/css/--inch.css b/css/--inch.css index b0bd60b..0d4c9ab 100644 --- a/css/--inch.css +++ b/css/--inch.css @@ -66,41 +66,124 @@ /****************/ /* iPhone 11 Pro Max */ -@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { - :root { - --inch: 370px; - } +/* see below */ +/* iPhone 6 */ +/* see below */ +/* iPhone 4 and 4S */ +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { + :root { + --inch: 163px; + } } - -@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { +/* iPhone 5, 5S, 5C and 5SE, SE (1st) */ +/* resolution: 2dppx; - css resolution: 2dppx; = logical - not supported in safari/macos */ +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { + :root { + --inch: 163px; + } #app { background-color: blue; + } +} +/* iPhone 6, 6s, 7, 8, SE (2nd and 3rd) */ +@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2){ :root { - --inch: 189px; + --inch: 163px; } } - -/* iPhone 6 */ -@media (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { +/* iPhone 6 Plus, 7 Plus, 8 Plus */ +@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { + :root { + --inch: 163px; + } +} +/* iPhone 11, iPhone Xr */ +@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { + :root { + --inch: 163px; + } +} +/* iPhone 11 Pro Max, iPhone Xs Max */ +@media screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { :root { - --inch: 189px; + --inch: 152.67px; } } +/* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, iPhone 14 */ +@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { + :root { + --inch: 153.33px; + } +} +/* iPhone 12 Pro Max, iPhone 13 Pro Max, iPhone 14 Plus */ +@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) { + :root { + --inch: 152.67px; + } +} +/* iPhone 14 Pro */ +@media only screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) { + :root { + --inch: 153.33px; + } +} +/* iPhone 14 Pro Max */ +@media only screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) { + :root { + --inch: 153.33px; + } +} +/* iPhone 12 mini, iPhone 13 Mini, iPhone X, Xs */ +@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { + :root { + --inch: 165.2px; + } +} /****************/ /* TABLET ZONE */ /****************/ -/* ----------- iPad Pro 10.5 ----------- */ -@media (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { +/* iPad (1-6), iPad 2, iPad Mini (1-5), iPad Mini 2, iPad Mini 3, iPad Mini 4, iPad Air 2, iPad Pro 9.7" */ +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) { + :root { + --inch: 163px; + } +} +/* iPad (7-9) */ +@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (-webkit-device-pixel-ratio: 2) { + :root { + --inch: 133px; + } +} +/* iPad Air (3-4), iPad Pro 10.5 */ +@media screen and (device-width: 834px) and (device-width: 1112px) and (-webkit-device-pixel-ratio: 2) { :root { - --inch: 158px; + --inch: 132px; } } - -@media (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { +/* iPad (10th), iPad Air (5th) */ +@media screen and (device-width: 820px) and (device-width: 1180px) and (-webkit-device-pixel-ratio: 2) { :root { - --inch: 118px; + --inch: 132px; } } +/* iPad Pro 11" (1-6) */ +@media screen and (device-width: 834px) and (device-width: 1194px) and (-webkit-device-pixel-ratio: 2) { + :root { + --inch: 132px; + } +} +/* iPad Pro 12.9" (1-6) */ +@media only screen and (device-width: 1024px) and (device-width: 1366px) and (-webkit-device-pixel-ratio: 2) { + :root { + --inch: 132px; + } +} +/* iPad Mini (6th) */ +@media only screen and (device-width: 744px) and (device-width: 1133px) and (-webkit-device-pixel-ratio: 2) { + :root { + --inch: 163px; + } +} /*******************/ /* SMARTWATCH ZONE */ diff --git a/css/devices.css b/css/devices.css index 96be949..95a74c6 100644 --- a/css/devices.css +++ b/css/devices.css @@ -1,62 +1,4 @@ -/* ----------- iPhone 4 and 4S ----------- */ - - -/* Portrait and Landscape */ - -@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { - :root { - --inch: 130px; - } -} - - -/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ - - -/* Portrait and Landscape */ - -@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { - :root { - --inch: 162px; - } -} - - -/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ - - -/* Portrait and Landscape */ - -@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { - :root { - --inch: 189px; - } -} - - -/* ----------- iPhone 6+, 7+ and 8+ ----------- */ - - -/* Portrait and Landscape */ - -@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { - :root { - --inch: 156px; - } -} - - -/* ----------- iPhone X ----------- */ - - -/* Portrait and Landscape */ - -@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { - :root { - --inch: 200px; - } -} - +/* moved iphones and ipads to --inch as they've been tested */ /* ----------- Galaxy S3 ----------- */