0

Possible Duplicate:
How to detect page zoom level in all modern browsers?

I'm building a website with an image that needs to have the same physical size on every device or browser. Let's say the image perfectly fits on an iPhone5 screen, i.e. it's physical size is 3.49x1.96 inches (or 4" diagonal). If I look at it on my laptop's browser, it also needs to have the size of 3.49x1.96 inches (obviously suffering from lower resolution). On an iPhone4 with a smaller screen, it would even cut of some parts of the image.

I guess I would need to get the PPI/DPI and then adjust it accordingly, i.e. if the device has have the PPI/DPI of the iphone5, I need to resize the image to 50%. I'm a bit confused, though, whether I need to take the screen resolution into account as well, as it can be changes on non mobile devices. Can anyone help me out here?

What would be a a good approach to make this work on all devices?

Community
  • 1
  • 1
Jokaero
  • 1
  • 1
  • 2
  • Did you try just using `in` as the unit on you CSS? It *might* work on *some* devices. I foresee a nightmare to achieve that consistently across browsers... – bfavaretto Dec 10 '12 at 17:19
  • 2
    You're going to discover that your goal is impossible (at this time). – Pointy Dec 10 '12 at 17:25
  • Lots of device emulators require user specifying user screen size, see browserstack: https://www.browserstack.com/question/574 – plarner7 Jul 03 '18 at 16:11

1 Answers1

0

I would use the srcset tag

<img src="foo-lores.jpg"
 srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
 alt="decent alt text for foo.">

2 and 6.5 are the relative resolutions *Source: HTML Doctor

muchObliged
  • 35
  • 4