CSS/HTML – dp (density independent) units?

For Android, people recommend using dp (density independent) measurements for UI elements, and there are conventions that exist such as using 48dp for a button height, etc.

I’m working on a CSS/HTML/Javascript application, and I’m getting a lot of criticism on the UI design saying it does not conform with Android design standards. Obviously my application is going to look different since it is using CSS/HTML/Javascript instead of the Android Holo theme, but I would still like to make it conform as much as possible. However CSS does not allow density independent measurements. When I test my application on different resolutions and pixel densities it does not look good and sometimes it is way out of proportion so it’s not even functional. CSS doesn’t have dp units like Android native development does, but I was wondering what some alternatives are. Can I somehow get the pixel density using Javascript and manually scale everything appropriately? What is the best way for making a CSS/HTML/Javascript app that looks and works nicely on all resolutions/densities?

  • How to open downloaded file (pdf,zip,docx, etc) in Phonegap app?
  • Multiple EditText objects in AlertDialog
  • Retrieving Android API version programmatically
  • List of local:MvxBind binders
  • Bad parameters: BadParametersError: Parameters were incorrect. We wanted required capabilities on Selenium grid while running Appium
  • strange log entry related to webcoreglue in android
  • Related posts:

    How can you put the android emulator into sleep mode?
    Getting WiFi signal strength in Android
    how to get all elements of an ArrayAdapter?
    How to run an async task for every x mins in android?
    How to upload files from Android to Amazon S3 WITHOUT using the SDK
    Enable horizontal scrolling in a webview
  • Android AlarmManager problem with setting & resetting an alarm
  • Android: Context menu on single click
  • Replacement for SimpleCursorAdapter?
  • How to generate an MD5 checksum for a file in Android?
  • Get ALL User Friends Using Facebook Graph API - Android
  • android: zxing barcode scan successful but not returning from activity
  • 7 Solutions collect form web for “CSS/HTML – dp (density independent) units?”


    The closest unit available in CSS are the viewport-percentage units.

    • vw – Equal to 1% of the width of the initial containing block.
    • vh – Equal to 1% of the height of the initial containing block.
    • vmin – Equal to the smaller of vw or vh.
    • vmax – Equal to the larger of vw or vh.

    The only mobile browser to be aware of that doesn’t support these units is Opera. http://caniuse.com/#feat=viewport-units

    I disagree with the currently accepted answer. As uber5001 suggests, a px is a fixed unit, and in a similar spirit to the efforts of the Android-specifc dp.

    Per Material’s spec:

    When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

    In CSS3 it may be more accurate to say that the web doesn’t have Android’s px. The spec for CSS3’s px says this:

    pixels; 1px is equal to 1/96th of 1in

    px might be the measurement you want, in the future.

    What about a interface based on rem units?

    I’m not experienced enough on the matter to confirm, but I think you could make some math based on the viewport size to apply a font-size in the root element and the entire interface would adjust accordingly. This stuff is a bit of witchcraft to me yet.

    Use rem.

    It is the font size of the root element and a very good base unit for the size of other UI elements.

    If one used the same absolute size (in centimeter), the text and other elements would be much too big on mobile or much too small on desktop.

    If one used the same amount of pixels, the text and other elements would be much too small on mobile or much too big on desktop.

    The rem unit is on spot because it says “Hey, this is how big normal text should be.” Basing the size of other UI elements on this is a pretty reasonable choice.

    As of CSS3, there are no CSS units that are truly device-independent. See http://www.w3.org/TR/css3-values/#absolute-lengths. In particular, the absolute units might not match their physical measurements.

    If physical units were true to their purpose, you could use something like points; points are close enough to dps:

    1 in = 72 pt
    1 in = 160 dp

    => 1 dp = 72 / 160 pt

    If you use SCSS, you can write a function to return in pts:

    @function dp($_dp) {
      @return (72 / 160) * $_dp + pt;

    And use it:

    .shadow-2 {
      height: dp(2);

    Why not use points, it is a consistent size across devices. And is relative to the screen size. Most are not familiar with it since it comes from traditional publishing.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.