Mobile device resolution (width, height) screen size header

Question

It seems there is no real standard for specifying "screen-size" in a http header from a user agent.

For example, the two headers below:

X-UP-devcap-screenpixels: 320x240

or

UA-pixels: 320x240

are two commonly used headers. The second is used by Windows Mobile devices mostly. The X-UP looks like it comes from the UP browser gateway.

Another option is

X-Screen-Width: 320
X-Screen-Height: 240

the X-Screen-Width might be made a up header.

My question is:

What is a good standard to adopt on our "transcoder" going forward? It's not really a full web browser, but is mostly for limited sites. But it should be the standard that would be adopted by Opera Mini/GWT etc.

Neither Opera Mini nor Google Web Transcoder sends this information through in their HTTP requests. I guess they expect the site to look up the phone model, and thereby the screen width and height, on the server side.

I actually found this RFC 4229 called HTTP Header Field Registrations. It's kind of outdated, and a mission to contribute fixes to.

If I had to see what's used mostly in the field, I would probably end up going with "UA-Pixels".

Some more references

• Some devices (mostly Windows Mobile again) have a 320x240 value in the user-agent header

Answer 1

It's worse than you think.

UA-pixels: 320x240

Is often a lie. On IEMobile version <8 (Windows Mobile <6.1.4) devices with 640x480 pixels still report themselves as 320x240. In addition, in most versions of IEMobile the view may be zoomed to some extent so that the design size you have to hit is unrelated to the UA-pixels size.

The opportunities for liquid layout are limited prior to IEMobile 8. Yet in IEMobile 8 on WinMobile 6.5 you get about XGA resolution, zoomed out, whether you like it or not. Oh, and there is no way to sniff IEM8-on-6.5 vs. IEM8-on-6.1 from the headers.

I'm not sure what exactly the purpose of your application is, but outputting HTML/CSS that renders exactly to the size of the screen is practically impossible if your targets include the abysmal horror that is IEMobile.

Answer 2

Stumbled across this question and thought I would add a way to do this that is currently implemented in about three quarters of browsers.

Client Hints

Client hints have about a 75% availability in browsers at the time of writing, so they obviously cannot be relied upon across the board but for the browsers that do support them they can be useful.

You can't get screen height, but you can get width and Device Pixel Ratio (DPR).

To use client hints you need to either add a <meta> tag

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink">

or send a header

Accept-CH: DPR, Width, Viewport-Width, Downlink.

Browsers that support this will then send their response with each subsequent request.

Useful for?

Images!

You could rely on the <picture> element and supplying all the different variations of an image at different widths and resolutions, or you can use client hints to dynamically serve the right image size (and format)

GET myimage.jpg
DPR: 2
Viewport-Width: 1024
Accept: image/webp,image/*,*/*;q=0.8

We can then dynamically serve the correct size image and best format possible.

With the width header you could even decide which variation of a stylesheet to send based on desktop or mobile (although you would have to be very careful and this is probably not advised, just an idea of how you can use it for dynamic resource serving).

Answer 3

Here is a list of common screen resolution headers:

X-UP-devcap-screenpixels

or

UA-pixels

or

X-JPHONE-DISPLAY

I looked at the code snippet that Google give's for their Mobile Adsense and these are the three they check for so far.