I want to show an image in actual size(real world size). I used mm unit to show the image in actual size but it wasn't exact in my two computers.
Here is the fiddle of my code, this is a picture of a credit card. a credit card is 85.60 × 53.98 mm so if you put your credit card on screen you probably will see it's smaller.
img{
width:85.60mm;
height:53.98mm;
}
Basically the problem is mm, cm and in units are not working properly in screen. They are fine in printed version. Actually it seems those units are not made to work in the screen as what I got from W3C.
So is there any solution for this problem?
-----EDIT------
I created another fiddle that you can resize the credit card. The question could be how can I find that "Ratio" number? Please look at fiddle here and let me know what you thinking? Is there any way to find that Ratio number from user agent string or something?
There's no way to do this until operating systems, graphics cards, and display manufacturers all agree on a universal standard for converting physical dimensions into a pixels applicable to the particular set up a user is using.
The term for this concept is Resolution Independence
While there is some support for this in OSX and Windows, it's by no means complete and still takes manual intervention to set up properly.
On top of all of that, you are at the mercy of the end-user deciding to over-ride your measurements using zoom--be it on the desktop such as in Firefox or on a touch device by pinching.
So, at this point, I'm afraid there's no way to go about it.
mm and cm should not be dependant on pixels. But for it to render properly your browser has to combine screen diameter, aspect ratio and resolution.
W3C only recommends mm for print so there is probably a large difference in browser implementation for screen
http://www.w3.org/Style/Examples/007/units
BTW on my 1920x1080 (16:9) screen it works quite well
I am pretty sure that mm and cm are dependent on pixels, and pixels vary from monitor to monitor. Adjust your screen resolution and you'll see what I mean.
So, I guess the answer is a 'no'. Sorry.
Related
Is there a way to tell/set, how many millimeters an element has, which works across various devices?
For example, I would like to create a white window which is 100 x 100 mm, with a black 10 x 10 mm square in the middle, which would have those dimensions on desktop, tablet, print, ...
I don't mind to use very latest browser but it has to use HTML/JS/CSS.
PS: Related: is there a way to tell, how many millimeters the screen has?
Edit
In other words, the problem is that using CSS units like pt, mm, cm, ... does not work as browser vendors decided to hardcode 96 DPI into the agents, according to here. Is there anything one can do to get real, physical, dimensions on web?
Not really.
In theory you can set lengths using mm units, but this requires that the browser accurately handles the DPI of the display … and browsers tend to assume a fixed value instead of getting the real one.
If that worked, you could then get the width in that unit by creating an off-screen element of known physical dimensions, reading the pixel dimensions using JavaScript and using that ratio to convert the pixel dimensions of any other element to mm.
In practice, if you need accurate measurements you are pretty much limited to drawing something on screen and asking the user to measure it with a ruler to get your ratio.
Alternatively, if you can identify the specific device in use (which the User Agent String may tell you for some devices) and you keep a database of the physical sizes of those devices (so this is limited to a subset of phones and tablets and won't work if they are connected to an external display) you could use that to determine the dimensions.
cm and mm can be used as CSS units , For more information please have a look at
http://www.w3.org/TR/css3-values/#lengths
16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
Im not sure how well they work in high screen density devices..
Question says it all really. I want to be able to display something at actual size, so, for example, if something is displayed in the browser as 20cm, I want to be able to measure it and it to actually be 20cm.
So far I have come across solutions which take into account the diagonal resolution of the screen (such as 21.5 inches) and the screen resolution to calculate how big a pixel is.
Another approach is to ask the user to put up a standard sized card such as a bank card to the screen and measure the edges to calculate the size.
Is there a way to do this without a physical object on the screen or without the user needing to know their diagonal screen size?
Please also let me know if you know of any different solutions other than the ones I have mentioned.
You can't do this with absolute certainty, no. For example, if the display device is not a screen, but a video projector, the effective size will depend on the distance of the projector to the wall, which can change without the operation system getting any feedback.
Most operation systems have some dpi setting (dots per inch), which might either be configured by the user or system administrator, hard-coded (if the video device is build in and can't be changed, like a laptop screen), or maybe automatically discovered (if the video protocol supports this).
Either this setting or a similar browser setting will be used by the browser to calculate absolute sizes used in CSS, like cm, mm, in, pt, and so on.
So you could simply rely on the browser to show it right, or tell your user to set the setting right. (Of course, on a video projector with projection size 3×4 m you don't really want to show a 20 cm object.)
It had been suggested in other places that making a hidden 1" div and then querying the pixel width would get a virtual DPI that you could use to calculate the size by getting the screen width and height in "pixels". I haven't tried this myself yet.
I have been working on making our CMS export valid content for mobile devices. One of the problems we encountered was that newer devices, like the iphone4 have a higher resolution display so we needed to find a way to render the same page correctly on older devices and newer that use a 300dpi display. So far we used javascript and window.devicePixelRatio in order to get the dpi resolution, but it turns out this is not working in opera(?) and opera mobile.
Any suggestetions or maybe a defferent approach? I researched a bit but was unable to find somethig.
Thanks
I think you might misunderstand what devicePixelRatio is really telling you — surprise, a pixel is not a pixel!
When you specify a pixel size in CSS, you're not necessarily specifying a size in physical pixels. Instead the CSS px unit is actually a "device-independent pixel" (DIP), which is relative to the device's DPI:
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
The reference pixel is defined as 96dpi (Windows' default DPI setting), so on your computer, it is true that 1 DIP (CSS px) = 1 physical screen pixel. Additionally, even though older iOS devices have a physical DPI of 163, they still use 1 DIP = 1 pixel. However, on iPhone 4's doubled resolution of 326 DPI, 1 DIP = 2 screen pixels, which is what devicePixelRatio = 2 is telling you.
Thus, speaking strictly of the difference between the iPhone 3 and iPhone 4, a HTML element with the style { width:100px; height:100px; } should render at roughly the same size on older devices and on the higher-DPI iPhone 4 since it rescales the pixel values.
So there is no reason you sould have to use script to account for high-DPI devices; it should just work.
Opera Mobile doesn't have devicePixelRatio yet as it is pretty much a none-standard extension added by Apple. We are considering adding this however, and may be in the next release of Opera Mobile if we do. You don't need to use JS for this however. It should work in a Media Query too with device-pixel-ratio (with vendor prefixes).
HI all,
josh3736 gave a very nice and concise answer to the css vs device pixel issue. Just wanted to add that it does seem to be an issue with large, high definition images which may need to be served more specifically for individual dpi or ppi device spec's. Searching google, I found that others are (attempting to?) using the device-pixel-ratio as a base to resize images smaller for high ppi displays, while keeping the original high def. image available for these devices and providing low def. images for mobiles without high dpi displays. That way the image is of higher quality for these devices, yet looks sized the same relative to the rest of the page across the spectrum of user devices.
The ability to zoom seems to make this more useful I gather, since a user can zoom in on high def. images and get increased detail. Of coarse this does add another layer of complexity to deal with, but it may be important to address as we have more and more new high end devices entering the markets. Still looking into this, so post back if anyone has good examples.
I have this site which was developed few years back. At that time it was developed keeping 1024x768 resolution in mind. Now a days people use much higher resolution.
I was thinking if it is possible to open the site zoomed in automatically if the resolution of user's monitor is set considerably higher than 1024x768?
Right now if I look my site on my macbook it looks like following:
I would like it to be opened up like following:
I hope I have explained the question correctly.
My browser settings are my own! It's none of the webeveloper's business to change anything in that area!
What you may be looking for however, are flexible layouts. (But that doesn't work well when you integrate pictures, as with zooming, they tend to get pixelated...)
Update
If you want to have a flexible layout that scales well and easily (also through scripting), you can consider using the em unit.
To have only a layout adjust to the screen width for instnace, you can also use percentage values.
I would like to programmaticaly determine the DPI of a user's display in order to show a web page at a precise number of units (centimeters/inches). I know it a weird request: it's for a visualization research project and it's kind of a control. We currently do it by having the user place a credit card to the screen and match a resizable div (via Mootools) to the real credit card, and voila we can get the DPI and display the page correctly.
Can anyone think of a programmatic way to do this?
If you're doing this in javascript/mootools, CSS units are your friend. You can specify sizes in inches or centimeters, or even points (1/72 of an inch). If you absolutely need DPI for whatever reason even though you can specify sizes in those units, simply size the "resizable" div you are using to a known size and calculate from the translated pixel size.
Edit:
Unfortunately, the CSS units of
points, cm, and in are not physically
correct. They are only relatively
correct. This was the first thing I
tried until I realized it wasn't
working and checked the CSS spec.. to
my dismay. – Brandon Pelfrey
That's a good point; browsers tend to fake it by assuming a default DPI (I think 72 or 96) and going with that.
Well, if you need precision sizing like you're asking for, you're out of luck. You'll never be able to get it without being able to read both the current resolution of the monitor the browser is on and the "viewable screen area" of that monitor. Ain't no way you're gonna get that via Javascript.
I suggest that you make the default assumption that browsers do and size according to the CSS units. You can then allow your users to "adjust the sizing" using the method you mentioned, but only if it's necessary. Do this with on a separate page with the DPI calculation stored as part of the users session or as a cookie.
Alternatively, once Microsoft fixes this bug, you could use Silverlight's "device independent units" for accurate scaling.
You can't. DPI is a function of the pixel resolution of the screen and the physical dimensions of the display. The latter is not available in any browser interface I am aware of.
I think that you won't get precise results - for example you can resize the picture using the monitor. I'd rather stick with the user-driven method, although you can f.e. detect screen resolution for a first estimate.
It's not possible from a browser without code running on the target computer. If you could install something on the target computer you might be able to determine enough about the monitor to calculate this.