How to make icon same/similar physical size on range of different devices?

Question

I've got a problem that has me really stumped. But it seems like it must be a common issue nowadays, I'm surprised I couldn't find another question about it.

Basically, I have icons that appear on my site. I want them to appear about the same size - roughly a touchable size - on every device. From an old cheap 2.3 Samsung to a new high 2560x1440 high res display, I want these icons to be about 1.5" across. A similar size on tablets, on computers, etc.

What would be a reasonable approach to figuring this out, without for instance making a complex table of a whole range of devices and screen sizes?

possible duplicate of [Web and physical units](http://stackoverflow.com/questions/18483955/web-and-physical-units) — Uyghur Lives Matter, Jun 26 '15 at 15:01

score 0 · Answer 1 · answered Jun 26 '15 at 13:01

0

You should use absolute measure values (cm, pt, mm, in, pc) instead of relative ones (px, em, %) :

.my-image
{
    width: 1.5in;
    height: 1.5in;
}

answered Jun 26 '15 at 13:01

FrancoisBaveye

1,902
1
18
25

1

I haven't had much luck with in/mm cross-browser. I found vh and vw (1% of the height and width) to be more reliable. – Sasha Shepherd Jul 05 '15 at 01:11

score 0 · Answer 2 · answered Jun 26 '15 at 13:53

May b your css media query does this change if this happens with media query then you need to remove that variable size with all resolutions. and also as well as you need to give the size of you icon in px. that will make your icons' size same with every devices.

How to make icon same/similar physical size on range of different devices?

2 Answers2