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?

  • C++ Command Line Apps on Android?
  • android drag view smooth
  • CollapsingToolbarLayout | Scrolling and layout issues 2
  • How to apply video filtering in android?
  • Android support action bar not showing overflow menu
  • How to make a smaller RatingBar?
  • Related posts:

    Best way to store data in android
    Make a mobile device a remote control for a tablet?
    Hitting 65k Dex method limit but dex-method-count tools says there is much fewer
    Editable text to string
    no resource found that matches the given name
    Clearing Static data onDestroy()
  • Custom circular reveal transition results in “java.lang.UnsupportedOperationException” when paused?
  • How to align drawableLeft to top instead center in android TextView?
  • how to make httpPost call with json encoded body?
  • ViewPager with one page containing multiple Fragments “java.lang.IllegalArgumentException: No view found for id”
  • How to correct set rounded corners in Android for Relative or else layout?
  • Apache HttpClient on Android producing CertPathValidatorException (IssuerName != SubjectName)
  • 7 Solutions collect form web for “CSS/HTML – dp (density independent) units?”

    http://www.w3.org/TR/css3-values/#lengths

    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.