Table of Contents
Android DP units vs CSS VW Viewport Percentage Units
If you're designing for more of a match to android, you'll know that Android uses DP for the units. DP is density-independent pixels.
The closest match to that if you were creating a web app would be Viewport Percentage units in CSS. This form of measurement is understood by every browser except for maybe Opera, depending on the time of this writing. Opera has gone more towards the chrome back end route so it probably supports it by now.
Why does this matter? If you were designing web pages or prototypes and wanted to best conform to android, whether for usage or presentation, you'd want to make the best decision on how to work with units. This would allow you to best conform. In the case of prototyping, if you needed an HTML prototype to match the eventual Android app, you'd want to to use those units. Then the onscreen display in HTML would resemble the app proportionally and would make it easier for maintenance, presentations and more.
How does VW work:
- 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.
It's not that simple
There were arguments about this very topic in the Stack Overflow article. People were pointing out that the Material spec (which presumably is the best aligned Android / Web resource is to actually use pixels. Others recommended using Rem units for designing. So it's best to evaluate each of these methods and use the one that makes the most sense for the project at hand, being prepared / compensating or looking towards that projects evolution in the future.
Resources
- Stack overflow article - DP vs CSS designing for android
- Difference in px, dip, dp, sp units - https://stackoverflow.com/questions/2025282/what-is-the-difference-between-px-dip-dp-and-sp
- Supporting Multiple Screens in Android - https://developer.android.com/guide/practices/screens_support
- Viewport Percentage Units - https://www.w3.org/Style/Examples/007/units.en.html
- Responsive Web Design - Wikipedia - https://en.wikipedia.org/wiki/Responsive_web_design
- Adaptive Web Design - https://en.wikipedia.org/wiki/Adaptive_web_design
- Ems in typograpy - https://en.wikipedia.org/wiki/Em_(typography)
- Mozilla MDN article on CSS and Units
