Start a new topic

Sizing based on Display Metrics

Sizing based on Display Metrics

I have been testing my AR app using a Samsung Duos device which is a HDPI device. Everything has been working fine in this device - radar is of correct size, markers appear correctly, etc. I tested the display metrics using:

 int density= getResources().getDisplayMetrics().densityDpi;

When I tested the same AR app in a Sony Experia today, which has a density DPI of XXHDPI, everything appears tiny, including the radar. Can this be fixed so that the app looks the same across different display metrics?

Just to clarify: I have a radar, I have a detail bubble in index.html which gets displayed when the markers are clicked. Both of these appear tiny in the XXHDPI device.


K. Ramesh

This is related to how html content displayed on top of the ARview is layout on mobile devices. You need to add a meta viewport tag for mobile devices that define how the content is rendered on the available screen space.

You can find more information on this at, e.g.:

In most cases this should be sufficient:

<meta name="viewport" content="width=device-width, initial-scale=1">

We still suggest to test on different sized devices then decide if the layout should look different on bigger screen devices (e.g. tablets). To change the layout based on the availalbe space we suggest using CSS media queries.

Hi Wolfgang,

Thanks for the response. I will read about both the viewport and the media queries. In the meantime, this is the viewport setting I have in the index.html:

<meta name="viewport" content="target-densitydpi=device-dpi, width = device-width, user-scalable = yes,  minimum-scale=1.0, maximum-scale=1.0" />

Should this be changed? When I changed it to the one suggested by you, with initial-scale=1, the radar and the markers became huge on the higher density device.

One more question: if I want to control the whole thing with only media query, how can the radar size be adujusted per device? We specify the center and the radius of the radar in radar.js right? How can this be controlled through CSS?


K. Ramesh

you might need different viewport settings to accomplish what you want. One thing you can try is to remove the target-densitydpi=device-dpi tag. As it turns out this one was deprecated and won't be supported on Android 4.4 anyway.

The radar size is directly related to the size of the html element you are specifing when enabling the radar. Therefore making this element the right size (using css) should be sufficient. 
Login or Signup to post a comment