Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save JGeraldoLima/e1b021a03a89a45c6b03c8edebc047e3 to your computer and use it in GitHub Desktop.
Save JGeraldoLima/e1b021a03a89a45c6b03c8edebc047e3 to your computer and use it in GitHub Desktop.
Map of -webkit-min-device-pixel-ratio/-webkit-max-device-pixel-ratio values to Android/iOS screen density levels. Useful for mobile hybrid (Ionic, ReactNative, NativeScript and so on) frameworks based on web development assets dimensioning.
/* Example of a CSS class to use to show the asset */
/** Ionic example
<ion-grid align="center">
<ion-row justify-content-center>
<ion-col col-8 align-self-baseline>
<div class="camera-icon"></div>
</ion-col>
</ion-row>
</ion-grid>
**/
.camera-icon {
background-repeat: no-repeat !important;
background-size: contain !important;
width: <width>px !important;
height: <height>px !important;
display: inline-block !important;
}
/* Android ldpi */
@media screen and (-webkit-max-device-pixel-ratio: 0.9) {
.camera-icon {
background: url("../assets/camera-icon/camera-icon-ldpi.png");
}
}
/* Android mdpi */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1) {
.camera-icon {
background: url('../assets/camera-icon/camera-icon-mdpi.png');
}
}
/* Android hdpi */
@media screen and (-webkit-min-device-pixel-ratio: 1.1) and (-webkit-max-device-pixel-ratio: 1.5) {
.camera-icon {
background: url('../assets/camera-icon/camera-icon-hdpi.png');
}
}
/* Android xhdpi | iPhones 4, 4S, 5, 5C, 5S, 6, 7, 8 */
@media screen and (-webkit-min-device-pixel-ratio: 1.6) and (-webkit-max-device-pixel-ratio: 2) {
.camera-icon {
background: url('../assets/camera-icon/camera-icon-xhdpi.png');
}
}
/* Android xxhdpi | iPhones 6 Plus, 7 Plus, 8 Plus, X */
@media screen and (-webkit-min-device-pixel-ratio: 2.1) and (-webkit-max-device-pixel-ratio: 3) {
.camera-icon {
background: url('../assets/camera-icon/camera-icon-xxhdpi.png');
}
}
/* Android xxxhdpi */
@media screen and (-webkit-min-device-pixel-ratio: 3.1) and (-webkit-max-device-pixel-ratio: 4) {
.camera-icon {
background: url('../assets/camera-icon/camera-icon-xxxhdpi.png');
}
}
@JGeraldoLima
Copy link
Author

Credits to this stackoverflow answer: https://stackoverflow.com/a/51646690/5797426

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment