We Keep Coding

Why does screen.width detect different width than phone manufacturer stats? [duplicate]

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.

Find actual screen resolution (not CSS pixels, real screen) with javascript

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

Responsive Design on mobile phones with higher resolutions

To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.
My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.
Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.
Many responsive websites use media queries to display a CSS file based on the pixel width.
Wouldn't this be the same for both my monitor and phone?
MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.
EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.

I recently created a website using similar tech http://www.super-rod.tv/
It targets on both PC and mobile devices and will response to dynamic browser width resizing.
I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen.
If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width
To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).

Detecting physical screen dimensions of WebKit devices in JavaScript

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
}

Android 2.2 2.3 workaround for device-width media query

I've observed a problem on Android 2.2 and 2.3 native browser where device-width CSS media query and window.screen.width both report sizes based on your webpage document and scaling applied.
Example: 1:1 scaling, 960px wide page will show proper device width (say, 320px)
Example: fit-screen scaling, 960px wide page, improperly reports 960px device width
So with appropriate viewport meta tag content it seems predictable. However, in my case I cannot rely on the meta tag. Does anyone use a workaround to get a reliable device width measurement in Android irrespective of viewport meta tag? Other platforms do report this correctly across all scaling.
Ref:
http://code.google.com/p/android/issues/detail?id=11961

window.outerWidth and window.outerHeight always report the browser pixels (ie screen resolution minus UI bars, typically 480x762 on a Galaxy S.)
You may then to throw in window.devicePixelRatio to calculate the virtual pixel width (320px).