[Solved] How to force browser to show image 3 inches wide?

Question

This is just not possible. The in measurement is for print, not for video output. If you use width:8in;height:11.5in then it will print on to paper as a standard Letter sized area.

Even on screens of the same resolution, an inch will be different. For example, a phone versus a projector. They can both have high resolution, but the pixels in an inch on a projected image will tiny. Moreover, there is no way to detect what the size of the projected image will be whatsoever because it is controlled at the lens of the projector (picture a 20ft projector screen with a width of 2000px, that is 8 pixels per inch).

The only possible way to accomplish a pixel to inch measurement would be to hardcode it after direct measurement of each mobile device supported and then determine a way to specifically detect the presence of each one of those mobile devices. This is non trivial and will more than likely not work as a solution.

All in all, it is not possible to force the browser to show 3 real inches of size because it really has no clue what that means. Stick to percentages, or make a library of pixel to inch conversions for supported mobile devices.

Accepted Answer

This is just not possible. The in measurement is for print, not for video output. If you use width:8in;height:11.5in then it will print on to paper as a standard Letter sized area.

Even on screens of the same resolution, an inch will be different. For example, a phone versus a projector. They can both have high resolution, but the pixels in an inch on a projected image will tiny. Moreover, there is no way to detect what the size of the projected image will be whatsoever because it is controlled at the lens of the projector (picture a 20ft projector screen with a width of 2000px, that is 8 pixels per inch).

The only possible way to accomplish a pixel to inch measurement would be to hardcode it after direct measurement of each mobile device supported and then determine a way to specifically detect the presence of each one of those mobile devices. This is non trivial and will more than likely not work as a solution.

All in all, it is not possible to force the browser to show 3 real inches of size because it really has no clue what that means. Stick to percentages, or make a library of pixel to inch conversions for supported mobile devices.