Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Please report device capabilities in a request header

more options

Responsive Web Design http://bit.ly/f6TPB7 is an extremely important approach/technique/movement for making web mobile-friendly. Given that web mobile traffic is exploding and there were more smart-phones sold in 2011 than PCs http://vrge.co/wqOiED the importance of the movement can not be emphasized enough.

We have some significant obstacles on the path of fully optimized Responsive Web Design, however. Responsive Images (smaller images for smaller screens to optimize download times) and optimized CSS/JS (mobile devices don't need the same JS/CSS as desktop browsers do) are the obvious ones.

The most optimal way to handle responsive images and optimize CSS/JS would be on the server-side. However, server-side does not have enough information about device capabilities, resulting in emergence of all kinds of cruft-y solutions (e.g. using
's for tags etc.) that should not exist.

However, browsers do know a lot about devices they are running on and could pass that information to servers as part of the initial request, making it possible for servers to get way smarter than what we have now.

Something as simple as if Firefox passed along device's width/height information as part of the initial request headers would go a very very long way, making it possible to make a lot of intelligent decisions on the server-side (eventually allowing "media-queries-like" systems on the server-side).

Since some proxy servers cut-off or disable custom headers, probably the safest way to add this is to add width/height information in the user-agent header.

Responsive Web Design [http://bit.ly/f6TPB7] is an extremely important approach/technique/movement for making web mobile-friendly. Given that web mobile traffic is exploding and there were more smart-phones sold in 2011 than PCs [http://vrge.co/wqOiED] the importance of the movement can not be emphasized enough. We have some significant obstacles on the path of fully optimized Responsive Web Design, however. Responsive Images (smaller images for smaller screens to optimize download times) and optimized CSS/JS (mobile devices don't need the same JS/CSS as desktop browsers do) are the obvious ones. The most optimal way to handle responsive images and optimize CSS/JS would be on the server-side. However, server-side does not have enough information about device capabilities, resulting in emergence of all kinds of cruft-y solutions (e.g. using <div>'s for <img> tags etc.) that should not exist. However, browsers do know a lot about devices they are running on and could pass that information to servers as part of the initial request, making it possible for servers to get way smarter than what we have now. Something as simple as if Firefox passed along device's width/height information as part of the initial request headers would go a very very long way, making it possible to make a lot of intelligent decisions on the server-side (eventually allowing "media-queries-like" systems on the server-side). Since some proxy servers cut-off or disable custom headers, probably the safest way to add this is to add width/height information in the user-agent header.

Valgt løsning

Mozilla is not in a rush to add a bunch of stuff to the request headers. There are sites such as bostonglobe.com that do responsive design without the need for such headers. In addition giving the exact pixels can lead to site design that easily breaks at other pixel width/heights and densities. That being said Firefox will be clarifying the general class of the device via the user agent. It will clearly call out being a mobile device <~7", tablet ~7" - ~11" and desktop. Which can be used to make generalizations about the size of the content you want to send. There will be more info about the user agent string after Firefox mobile 11 beta is released.

[edit] This work was scheduled for Firefox for Android v11 however do to time constraints this was released as part of Firefox 14 for phones. Tablet support will be added in an upcoming version of Firefox.

Les dette svaret i sammenhengen 👍 3

All Replies (8)

more options

Sorry this goes against the privacy goals of Mozilla.

more options

Thank you for a quick response, but I am really surprised/confused by your answer.

User-agent already reports operating system. Adding the width/height of the device is not really any more private than that and is definitely not a personally identifiable information. What does it have to do with privacy?

We are not asking to report any device capability that Javascript does not already have access to. So if somebody wanted to gather the information s/he could already gather it by making an Ajax request through Javascript. The only difference is: that won't help images or Responsive Web efforts in a clean way.

Bottomline: this information is already available and is not of a Private Identifiable category. We just need to make it available in a manner in which it can be used for good.

more options

Valgt løsning

Mozilla is not in a rush to add a bunch of stuff to the request headers. There are sites such as bostonglobe.com that do responsive design without the need for such headers. In addition giving the exact pixels can lead to site design that easily breaks at other pixel width/heights and densities. That being said Firefox will be clarifying the general class of the device via the user agent. It will clearly call out being a mobile device <~7", tablet ~7" - ~11" and desktop. Which can be used to make generalizations about the size of the content you want to send. There will be more info about the user agent string after Firefox mobile 11 beta is released.

[edit] This work was scheduled for Firefox for Android v11 however do to time constraints this was released as part of Firefox 14 for phones. Tablet support will be added in an upcoming version of Firefox.

Endret av Kevin

more options

That sounds great. Device width/height would be used on the server-side to derive class of the device (which is what is needed in the end) so if Mozilla prefers to run that logic on its side, that should not matter.

As for Boston Globe, I have discussed this with Ethan as well as implemented solutions similar to what Boston Globe uses and: it's not pretty. A way to make decisions on the server-side can greatly improve existing approaches.

Thank you!

more options

"That being said Firefox will be clarifying the general class of the device via the user agent. It will clearly call out being a mobile device <~7", tablet ~7" - ~11" and desktop. Which can be used to make generalizations about the size of the content you want to send. There will be more info about the user agent string after Firefox mobile 11 beta is released."

Kevin, are there any more details on this, or docs on what you guys are planning to expose and where? I checked the latest Android builds, and there is none of the above information in the UA.

Side note: I'm very interested in continuing this conversation and seeing if we can come up with a workable solution for FF + Chrome. I do believe we need to send more information to the server, but the UA string is probably not the right place.

more options

The current version of Firefox for Android has either "Mobile" or "Tablet" in the user-agent string depending on form-factor. For details, see: https://developer.mozilla.org/en/Gecko_user_agent_string_reference#Android

more options

Thanks Matt. What was the motivation or reasoning behind adding those strings in the UA? Are they being used by any analytics solutions or other products? On the surface, it seems rather limited at best..

more options

It's extremely common for sites to redirect "mobile" user agents to a version designed for handheld-sized screens. The Firefox for Android UA helps sites with separate small-screen and large-screen layouts choose an appropriate default for different devices. Also, since WebKit on Android similarly uses "Mobile" only on small-screen devices, the same logic can work for both Firefox and the stock browser:

http://android-developers.blogspot.com/2010/12/android-browser-user-agent-issues.html