Skip to content

fixing iphone 5, 6, 7, 8, metric #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cozyop wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fixing iphone 5, 6, 7, 8, metric #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0c00cb9
fixing iPhone 5, 5s, 6, 6s, 7, 8, and metric
cozyop Dec 19, 2022
b8ea07f
iphone 6, 6s, 7, 8
cozyop Dec 19, 2022
7a4cba9
all the current iphones and ipads
cozyop Dec 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 102 additions & 26 deletions css/--inch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,48 +66,124 @@
/****************/

/* iPhone 11 Pro Max */
@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
/* 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;
}
}
/* 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: 370px;
--inch: 163px;
}
}

@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
:root {
--inch: 189px;
}
/* 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 6 */
@media (device-width: 375px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
:root {
--inch: 430px;
}
/* iPhone 11, iPhone Xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
:root {
--inch: 163px;
}
}

@media (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
/* 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: 242px;
--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 */
Expand Down Expand Up @@ -148,9 +224,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);
}
58 changes: 1 addition & 57 deletions css/devices.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +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: 116px;
}
}


/* ----------- 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 { }
}


/* ----------- 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 ----------- */

Expand Down