CODEWITHSUNDEEP
javascriptcssmobileresponsive-design
Don Rhummy
Don Rhummy

Reputation: 25870

Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

I'm using media queries to serve different scales based on the screen size. But the screen size is not showing to CSS the correct numbers. On the Nexus 4, the display uses my "480px" CSS styles and in Javascript shows:

//Javascript shows these:
window.innerHeight == 519
window.innerWidth == 384

//CSS uses this rule:
@media screen and (orientation:portrait) and (min-width: 361px) {...}

A screenshot of the browser on the phone shows the visible window as 768 x 1038 which is exactly twice the height and width I'm ebing shown.

Is there a way to make the CSS and javascript use the actual resolution? I want to serve different image sizes depending on the resolution so they get the highest resolution picture appropriate to their screen resolution.

For example, I have a 768 x 400 version of the main image. I want to serve this to the Nexus 4, not the 480 x 250 scaled down image that it's getting. How would I do this?

Upvotes: 2

Views: 4940

Answers (1)

Pointy
Pointy

Reputation: 413976

Mobile browsers report whatever screen size they want. The browser "pixel" isn't necessarily a real pixel.

My HTC One X has a 1280x720 screen, reported as 640x360.

The path of least resistance is to leave it up to the hardware manufacturers. Sometimes they get it wrong (iPad Mini), but generally that's the simplest and best thing to do. By using multiple real pixels per reported pixel, text can be rendered very nicely. Thus the "standard" 16px font size will be pretty nice-looking on a small screen when it's really being drawn like 32px text.

(And no, you cannot force the browser to do anything differently.)

Upvotes: 3

Related Questions