device-width is an… unknown width

(Update: See bottom)

device-width is part of CSS3 Mediaqueries. It is a very useful tool for creating a fluid design which adjusts to the screen size of the current device the user is browsing with. As there are many types of screens and devices, the size is an unknown (A bit like macintosh users who are often not having their windows full screen.) So device-width is not predetermined. Well… until this morning… The IE Mobile Team has published an article saying (my emphasis):

The keyword “device-width” is intended to set the width of the Viewport to the width of the device that is viewing the page. On Windows Phone 7, the device width is 480 pixels. However, you will notice that if you set the Viewport width to “device-width”, IE actually sets the width to 320 (and also pins it to 320 if you specify a width of less than 320).

So device-width = 320px. And you were wondering why they took this decision? They explain.

Why does IE do this? We made this decision after a large amount of testing real-world mobile Web sites and learning (to our chagrin) that a very large number of sites out there that were using the “device-width” property were in fact not laid out for the device’s width, but were actually optimized for 320 pixels, probably because the majority of devices available on the market prior to Windows Phone 7 were 320 pixels wide. On many sites, this resulted in an empty strip along the side of the page when viewed in Windows Phone 7, since the sites were often using fixed-width 320px elements like

tags.

\ Bad bad bad decision. Really bad decision. Here the IE Team is taking into hostage, designers, users and other browser vendors and the specification. Basically they just destroyed the meaning and the need for device-width by unilaterally deciding a fixed value for device-width. Daniel (CSS Working Group co-chair) will be happy!

Update 2010-11-22 - 21:23 Someone rightfully told me that he was about

<meta name=”Viewport” content=”device-width” />

and not about the CSS property. That said, this is still bad, it creates expectations on something which is meant to be free of default value. It's where pave the cowpath doesn't make sense.