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.
Related
I find 2 people with the same problem, but all answers didn't work. So I'll try asking myself and let see what we will have, already thanks!!!
I used to use the version 4.6.1.
The project is basic some scenes, and the main scene we usually use the command
Screen.setResolution(1024,768,true) to "fit" to all resolutions and be full screen.
In the version 4.6.1, it worked fine for a while then not anymore, but for the new project we used the 4.6.4, and when we build the .exe, it don't really fit to the screen (1600x900) it take place in the middle of the screen with a black bar in each side.
We tried open a old project because we thought it could be some setting we were using wrongly, but with the same settings from the old (which is working) still has the problem!!!
We think it might be some windows update, because it is not changing windows native resolution , make any sense?
It only works on 4.0.17b (beta version).
Is there anything we could do?
See patch notes for Unity 4.6.1:
DX9: Add black bars in fullscreen mode to maintain aspect ratio.
This may have worked for you, before, depending on graphics settings and drivers.
In any case, you should generally assign a resolution that's appropriate for your monitor's aspect ratio. To calculate the aspect ratio of any given resolution, divide width by height, which you can read from Screen.width and Screen.height, or use one of the recommended resolutions from Screen.resolutions.
Is there some way to get the real screen-size or DPI of the device? I have certain elements in my application which are not usable if the display is too small and need to switch to a different presentation and/or omit the elements.
Short answer: No. There's (currently) no way to accurately design for the web using physical units.
Longer answer: you can only try to rely on the size of a "CSS Pixel" being roughly the same between devices, since device manufacturers have a vested interest in preserving the usability of sites when they have "high" pixel densities (~> 90 dpi).
A couple of notable exceptions:
the iPad mini is the same resolution as the original iPad, but (obviously) much smaller.
Opera on Android offers to pretend to be a desktop browser, including a fake device-width, etc...
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..
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.
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.