Problem with virtual viewport size on Windows Phone 7

Problem with virtual viewport size on Windows Phone 7

So I recently started making SlideShare mobile compatible with Windows Phone 7 browser. I am having issue with virtual viewport width property of the browser.

By default, I use this meta tag for setting the device width and setting the initial and maximum scale

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This works fine in iPhone 3GS (320x480), Devices with 480x800px resolution and bigger tablets but doesn't work in Windows Phone 7. I am using a Samsung Focus for testing.

Here it how it looks like in Samsung Focus. Its like the viewport width is 240px.

 

However, if I manually set the viewport width to 480px in the meta tag like this...

  <meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

...then everything works fine as shown in the pic below.



However, in this case the scale is set to 480px minimum and it breaks in older iPhone.

One way I found was to using conditional statements based on devices but that is not a proper way as this method is not scalable.

Shouldn't jQuery mobile be automatically setting viewport width to 480px for the virtual viewport of Windows Phone 7? How do I fix this problem?
______________________________________________________

Saurav Srivastava
Designer at SlideShare
Twitter: gx_saurav
Blog: http://gxsaurav.com