Today I found myself revisiting a problem I encountered a few months back whilst trying to get a website to correctly render on a Windows Phone 7 device. There are a few pages that discuss how to do this through the user of the viewport meta tag:
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx
http://www.ben.geek.nz/2010/07/integrated-links-and-styling-for-windows-phone-7-webbrowser-control/
http://learnthemobileweb.com/2009/07/mobile-meta-tags/
http://msdn.microsoft.com/en-us/library/ff462082(VS.92).aspx
Following these posts it would be easy to come up with a viewport meta tag that look like the following (or you could set the width property of the viewport meta tag to device-width, depending on the size of your content)
<meta name="viewport" content="width=208;height=377;user-scalable=no" />
This will NOT work, where as the following will work nicely….. spot the difference?
<meta name="viewport" content="width=208,height=377, user-scalable=no" />
Yes, that’s right you must separate the values with COMMAS not semi-colons (even that works on most other mobile platforms such as the iphone). Repeating that…. separate the name-value pairs in the content attribute of the meta tag with commas.