As far as I know it's the ratio between the "abstract" resolution and the device's physical resolution. So I test it (on HTC Desire), the physical resolution is 480x800, it's logged out the ratio is 1.5. I threw in some elements, but it still take exactly 480px width to fill the viewport where my naive thought it's need '320px'?
From http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html, where the author discusses the differences in devicePixelRatio across mobile devices:
On iOS Retina devices, screen.width gives the width in dips. So both a
retina and a non-retina iPad report 768 in portrait mode. On the three
Android devices, screen.width gives the width in physical pixels; 480,
720, and 800, respectively. All browsers on the devices use the same
values. (Imagine if some browsers on the same device used dips and
others physical pixels!)
Which leads the author to the following conclusion:
On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count.
On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the dips count.
What matters in your case is screen width, plain and simple. The calculation of DIPs is something for the device to take care of, rather than you as the developer. If the device wants to compensate for a different pixel ratio, it will serve you a width in DIP and give the ratio. If it feels that pages should be displayed with the native unmodified pixel resolution, it will serve you that width instead. The author of the post also comes to the following conclusion which I find interesting:
Apple added pixels because it wanted to make the display crisper and smoother, while the Android vendors added pixels to cram more stuff onto the screen.
At any rate, use the width the browser gives you and leave it to the device to compensate.
Related
These days there's a big difference between pixels and points (CSS pixels, DIPS). On my particular computer its the same, but on retina macs and a lot of phones, there's 4 or 8 pixels per point. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px,have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
I want to get the screen resolution (the real screen resolution, you get it by now), and then serve an image scaled to maximally fill the screen. This means no need to get 2000x2000 pixels images on mobile devices, while still getting good resolutions on a large mac.
Hover, when using screen.height it returns CSS pixels not the screen resolution, meaning a retina mac will get an image that is half the size of the screen, resulting in pixelation. Any way to get the actual screen resolution, or the pixels-to-points ratio in javascript?
This will give you the actual screen height, regardless of pixel density which is altered by including the viewport tag...
screen.height * window.devicePixelRatio
Macs with retina renders pages in 2x scale, and so screen.height returns actual height divided by 2. See answers here
I am making my first mobile game using the HTML5 canvas tag as well as JavaScript. The only external library I currently use is jQuery.
When I loaded my game onto my phone (Lumia 920), which has a 1280 x 768 resolution, the canvas (with the same resolution) was twice as high and wide. I heard that phones generally don't use the max resolution, but rather half of it or similar, which would display this.
So how could you make sure that the game supports all (I think 4) available resolutions? Would you have the canvas be 100% wide and tall, does WP8 have some way of automatically resizing, and is it usually necessary to have different images for different resolutions to ensure high quality?
CSS Pixels are differrent from device pixel.
The best example would be ipad and ipad retina.
A canvas of width 300px in ipad would be of physically same size as in Ipad retina, even though ipad is of resolution 768 * 1024 but ipad Retina is of 1536 * 2048.
This is because both the device are of same CSS PIXEL width .and Only thing which is changing is the density ratio which is 2 for retina device.
The same case is applicable to your LUMIA 920 Device to.
Also, If you want to determine CSS pixels size , then divide the screen resolution by density
1536/2 = 768
I was trying to understand about screen.width when viewing e.g. New York Times on my Android and iOS devices. Here are what I found (all viewed at portrait orientation):
screen.width returned 320 when I remote-debugged my iPod touch, which is supposed to have a 640x1136 resolution.
screen.width returned 384 when viewed on my Nexus 4, which is supposed to have a 768x1280 resolution.
Shouldn't screen.width return the resolution of the device? If not, what JavaScript object could I use to reliably get the resolution info?
What seems to be getting me the correct coordinates is window.innerWidth and window.innerHeight. I can guarantee they'll work, but they probably will. If they don't, make sure that the website isn't zoomed in (some mobile browsers zoom automatically)
What's basically going on here is that, to make sure that older sites render properly on these devices, Apple made the decision to report the original sizes when they moved to the retina display on the iPhone. Because of this precedence, Google made the same decision. If you are at your PC and it has a resolution of 1024x768, it will likely be a 10+ inch display. This would not translate well to a device that is only 4 or 5 inches diagonally, at least that's the rationale.
For a more in-depth look at this idea, I suggest you check out quirks mode's blog post about it, which you can find here
I'd like to categorize devices by screen width in client-side JavaScript code
All devices fitting to one hand (7" less) to mobile category
Treat other devices as desktop devices
Fallback: Treat devices which do not support necessary APIs as mobile devices
Question
Which related JavaScript and CSS APIs I could use to detect the screen physical dimensions? Please note that these APIs do not need to be necessarily supported in older browsers, as there is safe fallback. Also, I don't care about legacy desktop browsers either.
Firefox support is optional - if they have compatible APIs already.
Please note that this is about physical dimensions, not pixel dimensions.
There's no direct way to get the screen size in inches, but there are workarounds that use screen density to find the device size. It's not perfect, but you don't really need to know the exact size to 5 significant figures. Also, it is normally better to simply use pixel values, IMO.
HTML
Make a test div, and then see the number of pixels displayed to get the pixel density, then use that in your calculations. This should work, assuming that your browser/OS are configured properly (it didn't work in the this question but it was within half an inch on my computer).
EDIT: This is 100% wrong. The inch/cm measurements in CSS aren't based on an actual physical measurement. They're based on an exact conversion (1 inch = 96 px, 1 cm = 37.8 px). My apologies.
CSS
The best way to detect physical screen size is to use CSS media queries. The min-resolution and max-resolution queries can be used to get the resolution in either dpi or dpcm:
#media (min-resolution: 300dpi){
// styles
}
Combining it with the min-device-width and max-device-width queries, you get something like:
#media (resolution: 326dpi) and (device-width: 640) and (device-height: 960){
// iPhone
}
The problem is that if you want to target 7 inch devices, you'd have to have many resolutions and corresponding widths that go together, which could get complicated.
For more information:
MDN- CSS Media Queries
MDN- Resolution
"Mobifying" Guide
High DPI Images for Variable Pixel Densities (Somewhat Related)
Javascript
You can use window.devicePixelRatio to determine the screen density. From Android's WebView Reference:
The window.devicePixelRatio DOM property. The value of this property specifies the default scaling factor used for the current device. For example, if the value of window.devicePixelRatio is "1.0", then the device is considered a medium density (mdpi) device and default scaling is not applied to the web page; if the value is "1.5", then the device is considered a high density device (hdpi) and the page content is scaled 1.5x; if the value is "0.75", then the device is considered a low density device (ldpi) and the content is scaled 0.75x.
Then using this, you calculate the physical size by dividing this by the total number of pixels, which can be calculated with window.screen.width and window.screen.height (Don't use window.screen.availHeight or window.screen.availWidth because these only detect the available height).
For more information:
Android Webview Reference
MDN - Screen.width
MDN - Screen.height
devicePixelRatio Explanation
better to use CSS
#media screen and (max-width: 672px){
//your code for mobile category
}
#media screen and (min-width: 672px){
//your code for desktop category
}
Toying around with the WebKit browser in the new Kindle 3G, I noticed that window.screen.width and window.screen.height don't reflect the actual screen dimensions. The physical screen (or rather, paper) dimensions are 800 x 600. I get:
800 x 506 in landscape mode
600 x 706 in portrait mode
But interestingly, both Chrome and Safari (which are also WebKit) running on my desktop report the actual screen resolution.
According to MDC, these properties are not part of any specification, so there's probably no strict definition of what width/height should report. But, shouldn't it be expected that they reflect the actual screen dimensions?
Update:
The issue we see in the emulator with window.screen.width is when we use screens which don't reflect the actual pixels of the device. So what you see on the screen is 320 and what the device has is 480 or whatever. I don't understand, though, why the value of screen width would give the emulator size on the screen and not the actual pixels.
This thing might be the same issue with the devices? If their density is higher at some sizes... for whatever the reason this could translate to some wrong screen width size?
Anyway, read below for my solution.
screen.availWidth does not work for me on certain screen sizes on the emulator.
Only thing is working for me now is:
window.innerWidth
window.innerHeight
Which will return the value of the Viewport. In my case I'm running an HTML5 app. This values will not update on zoom, apparently.
They have some issues with this sizes on Android's Webkit. You can see the devs from Android talking about it here. Probably fixed in Honeycomb.
Somebody claims it takes some sizes as if the soft keyboard would be present.
I think WebKit can do nothing if it's getting wrong values from system. Sure these values should be represented by screen.availWidth and screen.availHeight, but I think this is related to event.screenX and event.screenY for mouse (pointer) positions.
It would seem that screen.availWidth and screen.width are both returning the availWidth all the time, on many mobile operating systems.
I was unable to find any documentation on this however I did tested Android 2.2 and got the screen size minus the top menu bar exactly no matter what a requested.
The difference are because the size of the Android status bar and or the bottom bar.