In Windows 8 we have two versions of the Internet Explorer, the well-known “Desktop” version, and the new “Windows Store” version, which can render everything that the “Desktop” version can, but does not support any kind of plugins like Flash, Silverlight, or Java Applets for example.
If we have a website or web application that rely heavily in some plugin, and we know that the user will not have a good experience without this plugin (or may not be able to use it at all), there’s a nice way to notify the user that our site uses add-ons and request the user to switch to the “Desktop” version of Internet Explorer with the click of a button.
This can be done in two ways, either by adding a meta tag in the header section of a web page, or by adding a custom HTTP header entry to the response headers of the HTTP request.
To go with the meta tag approach, we just need to add a X-UA-Compatible meta tag with a requiresActiveX=true in the content. Something like this:
<!-- // ... --> <head> <meta charset="utf-8" /> <title>Home Page</title> <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" /> <!-- // ... --> </head> <!-- // ... -->
To go with the custom HTTP header approach, which is my favorite by the way, just add custom header with the name X-UA-Compatible with a requiresActiveX=true in the value. If you are developing an ASP .NET or ASP .NET MVC application, you can set this in the Web.config. Something like this:
<?xml version="1.0" encoding="utf-8"?> <configuration> <!-- // ... --> <system.webServer> <httpProtocol> <customHeaders> <add name="X-UA-Compatible" value="requiresActiveX=true" /> </customHeaders> </httpProtocol> <!-- // ... --> </system.webServer> <!-- // ... --> </configuration>
Either way, the user is going to get a message like “The site [site url] uses add-ons that require Internet Explorer on the desktop“, with a button to open the “Desktop” version of the Internet Explorer, just like the image above.
Note that you can combine different values in the X-UA-Compatible meta tag content or custom header. For instance, if you are currently using this header to set the compatibility view and/or enable the Chrome frame, just separate the different values by a comma:
<add name="X-UA-Compatible" value="IE=Edge,chrome=1,requiresActiveX=true" />