Windows Phone 7 WebBrowser and WebBrowser Control Site Formatting

Windows Phone 7 WebBrowser and WebBrowser Control Site Formatting

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://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/bcd032d5-da02-4875-a74f-98db0f95dc89

http://www.ben.geek.nz/2010/07/integrated-links-and-styling-for-windows-phone-7-webbrowser-control/

http://technodave.wordpress.com/2010/11/11/moving-files-from-xap-to-isolated-storage-for-local-html-content-on-windows-phone-7/

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.

Leave a Reply

Your email address will not be published. Required fields are marked *