Windows Phone 8 – Internet Explorer 10 support for Mobile Websites–UserAgent(UA) details for IE10-WP8

Earlier Microsoft has announced that upcoming Windows Phone 8 will have Mobile version of Internet Explorer 10. IE10 have lots of improvements in terms of HTML5, JavaScript/ECMAScript support etc.

If you want your existing mobile websites to compatible to IE10 and you are using any User Agent(UA) detection logic to provide UA specific User Experience to the Website, here is the  WP8 – IE10 User Agent details for your from the Official Windows Phone Blog:

User Agent Details for WP8 – IE10:

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; ARM; Touch; IEMobile/10.0; <Manufacturer>; <Device> [;<Operator>])

Note: items enclosed in <> are optional entries specific to device, manufacturer and operator

Testing Compatibility in Desktop version of Internet Explorer 10

You can ensure your websites are compatible to different Windows Phone 8 resolutions in IE10 Mobile using the IE Developer Tools.

Follow the steps :

Step1: Set UA string

 F12 Developer Tools  -> Tools –> Change User Agent String –> select “IE for Windows Phone 8”

<code>  &lt;p&gt;&lt;strong&gt;&lt;u&gt;Step 2: Set Resolution&lt;/u&gt;&lt;/strong&gt; &lt;/p&gt;  &lt;p&gt;Since you set the UA to ‘IE10 for Windows Phone 8’, now it is the time to try out the different resolutions to see how your site looks in different resolutions of Windows Phone 8. For that you need to choose &lt;em&gt;&lt;font color="#c0504d"&gt;“F12 Developer Tools” –&amp;gt; Tools –&amp;gt; ‘Resize’ –&amp;gt; Choose the different resolutions&lt;/font&gt;&lt;/em&gt; for (portrait and landscape orientations your have different settings) and you could even specify the custom resolution.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/image2.png"&gt;&lt;img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/image_thumb2.png" width="563" height="484" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;As per the official announcement and demos earlier, Windows Phone 8 will support 3 different resolutions: &lt;/p&gt;  &lt;p&gt;800 x 480&lt;/p&gt;  &lt;p&gt;1280 x 720&lt;/p&gt;  &lt;p&gt;1280 x 768(WXGA)&lt;/p&gt;  &lt;p&gt;Set your resolution accordingly.&lt;/p&gt;  &lt;p&gt;&lt;a href="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/image3.png"&gt;&lt;img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/image_thumb3.png" width="578" height="484" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;&amp;#160;&lt;/p&gt;  &lt;p&gt;For the example I am setting the custom &lt;font color="#c0504d"&gt;720p(1280 x 720)&lt;/font&gt; resolution&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;&lt;u&gt;Step 3: Refresh your website&lt;/u&gt;&lt;/strong&gt; &lt;/p&gt;  &lt;p&gt;Now that you have done the necessary prerequisites to start, refresh your browser window. &lt;/p&gt;  &lt;p&gt;In the below example my blog is a Responsive Web enabled site, you could see the content has aligned for a mobile view.&amp;#160; &lt;/p&gt;  &lt;p&gt;Continue &lt;em&gt;&lt;u&gt;Step 2:&lt;/u&gt;&lt;/em&gt; for trying more resolutions. &lt;img class="wlEmoticon wlEmoticon-smile" style="border-top-style: none; border-left-style: none; border-bottom-style: none; border-right-style: none" alt="Smile" src="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/wlEmoticon-smile.png" /&gt;&lt;/p&gt;  &lt;p&gt;&amp;#160;&lt;/p&gt;  &lt;p&gt;&lt;a href="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/image4.png"&gt;&lt;img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="http://www.nitrix-reloaded.com/wp-content/uploads/2012/10/image_thumb4.png" width="559" height="772" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;Hope that helps. For more information and reference &lt;a href="/wp-content/uploads/2012/10/getting-websites-ready-for-internet-explorer-10-on-windows-phone-8.aspx" target="_blank"&gt;Getting websites ready for Internet Explorer 10 on Windows Phone 8 by Charles Morris&lt;/a&gt; (Windows Phone Blog)
</code>