What's dp (density independent pixels) units with CSS?

android css web-applications user-interface screen
Brad picture Brad · May 6, 2013 · Viewed 64.6k times · Source

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

I'm working on a web 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 and HTML 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 web app that looks and works nicely on all resolutions/densities?

Answer

Tohuw picture Tohuw · Jul 30, 2015

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.

Additionally

When designing for the web, replace dp with px (for pixel).

Related questions

Disable scrolling in all mobile devices

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this: body{ overflow-x:…

Read More
Rendering HTML in a WebView with custom CSS

My app is using JSoup to download the HTML of a message board page (let's say in this case it is a page containing the posts of a given thread). I'd like to take this HTML, strip out unwanted items, …

Read More
Background image jumps when address bar hides iOS/Android/Mobile Chrome

I'm currently developing a responsive site using Twitter Bootstrap. The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs. It's nearly perfect, except one issue. Using iOS Safari, …

Read More