User Tools

Site Tools


android_dp_units_and_css_vw_units

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

android_dp_units_and_css_vw_units.txt · Last modified: by 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki