How to set a different user agent for IE10 and IE11 - internet-explorer-10

I have a java web application running on Tomcat which works in Internet Explorer 8, and works in Internet Explorer 10 by setting the user agent string to IE8 mode. This web application mostly works in Internet Explorer 11 in IE10 mode via content="IE=10". The web application does not work in IE11 in IE8 mode due to IE11 emulation issues. Edge mode for IE11 does not work. IE10 mode is the only viable option at this stage.
I am looking for a way to set the browser mode for IE10 to emulate IE8, and set IE11 to emulate IE10 in the absence of conditional comments.
We have users with IE8, IE10 and IE11 on Windows 7.
IE10 is currently the dominant browser in use. We are moving to IE11 "soon". No other browsers can be used. Users have no choice of IE version, they will be upgraded over time to IE11.
To answer the question of: "Why set IE=8 mode for IE10 and IE=10 mode for IE11?":
It may be possible to fix some of the web application code so that IE11 works in IE=10 mode. IE11 emulation for IE8 is broken to the point that it is not worth trying to fix. The vendor does not support IE11. The best I can do is set an emulation mode which works for most features and fix the rest where possible.
IE=8 is the UA mode which works for IE8 and IE10. This needs to be kept until IE10 is no longer used.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
The most promising UA setting in IE11 to get this application to work is IE=10. This can not be set directly as it breaks the application for IE10 users. For IE11 alone this is a solution:
<meta http-equiv="X-UA-Compatible" content="IE=10" />
Conditional comments are no longer supported by IE10 and IE11. This means that the following code does not work. It results in IE11 having a document mode of Edge.
<!--[if IE 11]>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<![endif]-->
A setting of content="IE=8, IE=10" works for IE11 but not IE10.

With Velocity the user agent can be set differently for Internet Explorer 10 and Internet Explorer 11 by scraping the user agent then setting the mode depending on the user agent string. This works for now for Internet Explorer 10.
#if ( $req.getHeader("User-Agent").matches('.*Trident.6.0.*') )
<meta http-equiv="X-UA-Compatible" content="IE=8" />
#else
<meta http-equiv="X-UA-Compatible" content="IE=10" />
#end

Related

Force IE10 Default quirks mode when in Compatiblity view

One of our clients uses compatibility view for our site. Our website pages are old and cannot render in Standards mode. In IE10 compatibility view, if there is no doctype declaration, it forces it to IE5 Quirks mode.
Is there a way from html to force it to IE Default Quirks mode?
Yes. Use an x-ua-compatible header to emulate IE10's behavior.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
You can add this to each page's <HEAD> section or serve it using the web server.
(More of the underlying behavior change can be found here.)
Hope this helps...
-- Lance

history.pushState disappears in IE 11

There is a site http://www.pionart.pl which is a good illustration of the problem I have with the current site I develop with almost the same code/CMS
When I enter the site with IE 11, the browser forgets half of the history methods, incl. history.pushState() (you can easily check it by invoking the console with F12 and typing history.)
When I enter http://stackoverflow.com in the same tab, IE suddenly remembers all the methods back.
The question: what is the purpose of the "forgetting"? How to prevent it?
Adam
The problem was
<meta http-equiv="X-UA-Compatible" content="IE=9">
It forced IE 11 back to IE9 state, and we have pushState from IE10 up...
A.

Windows 8 prepare site for pinning

I would like to prepare my site for windows 8 pinning and have been reading some documentation on how to add the various images and could figure out that it could be done by using metadata and according to instructions and help on this site I could actually build the following meta tags but i couldn't figure out where I can call the browserdetect.xml file assuming I have the file located at mysitee.com/upload/win8/browserdetetct.xml and the images in the same folder
<meta name="application-name" content="MySite"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-square70x70logo" content="http://placehold.it/70x70/000000/ffffff&text=MySite"/>
<meta name="msapplication-square150x150logo" content="http://placehold.it/150x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-wide310x150logo" content="http://placehold.it/310x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-square310x310logo" content="http://placehold.it/310x310/000000/ffffff&text=MySite"/>
Any help please ?
Update: Microsoft Edge on Windows 10 and Windows 10 Mobile now only uses /browserconfig.xml, so stop including meta tags.
I see that Microsoft has — a bit prematurley — updated their wizard to Windows 8.1. Which is not backwards compatible with Windows 8.
What you need (in addition to my comments in the other post) is the older code with a 144x144 px image:
<meta name="msapplication-TileImage" content="/tileimage-144.png" />
That will work in Internet Explorer 10 on Windows 8 in conjunction with the two backwards compatible tags you already have:
<meta name="application-name" content="MySite" />
<meta name="msapplication-TileColor" content="#2d90c6" />
Note that you should not use application-name unless your site is actually a web application. (Per the HTML5 specs.)
You can test the Windows 8.1 (Internet Explore 11, actually) stuff in a virtual machine. Microsoft is handing them out for free over at http://www.modern.ie/en-US/virtualization-tools#downloads
Further enhancements: Internet Explore 11 does not actually need the tags to be present in the document. so you can save users who do not intend to pin your site the bandwidth (thus gaining performance) by including a browserconfig.xml in your root (eg. example.com/browserconfig.xml). IE 11 will read this file when a user tries to pin a site and load the resources needed from there instead of from the meta tags. So what you do is include the two/three tags IE 10 needs, and put the new IE 11 tags in your browser config file. Read up on http://msdn.microsoft.com/en-us/library/ie/hh772707%28v=vs.85%29.aspx (ignore the bits where it tells you to include a meta tag to load the config file. As long as the file name is browserconfig.xml and it is on your root, it will automagically work.)
Making it all darn perfect: Windows 8 requires no padding in their image, only a transparent background. Windows 8.1, however, expect ⅕ of the tile images to be left transparent for padding. You will stick out like a sore thumb amongst the other applications if you do not pay attention to the padding.
Live example: I implemented this on my own site over at Slight Future if you want an working (as of the Windows 8.1 Preview 1) example.
Final thoughts: Why Microsoft have to introduce something new for every single version of Internet Explorer / Windows, I can’t understand. Nothing is backwards compatible. For IE 9 / 10 and pinned sites on the Windows 7 / 8 desktop taskbar, you need a favicon in four different sizes.
You can follow the step-by-step tutorial / wizard at http://www.buildmypinnedsite.com

Safari 5.1 can NOT play HTTP Live Streaming (m3u8 file)

This is my html file, it can play at Safari 5.0.5 (Mac OS X 10.6.8), but when I update the Safari to version 5.1, it can NOT play, can anyone tell me why, and how to solve it in Safari 5.1? Thanks.
<html>
<head>
<title>HTTP Live Streaming</title>
</head>
<body>
<video controls src="http://mysite/index.m3u8">
</video>
</body>
</html>
Updated: I found the solution! When I set in the System Preference > Network > Advanced > proxies > Automatic Proxy Configuration with the proxy I use, I found the HTTP Live Streaming can NOT play, when I remove proxy, it can play now! How does this happen? Why it play well in Safari 5.0.5?
In Safari 5.1, open the Activity window with the Window->Activity menu. That will show you all the URLs it attempts to download as well as whether it downloads successfully. Maybe this will give you a clue.
Also look at the system console by running the Console app that you will find in /Applications/Utilities.
Try it in FireFox, Chrome, and on Windows, Internet Explorer and Safari for Windows.
If all those other browsers play your video OK, and neither the Activity window nor the console yield any insight, file a bug report. The chances are pretty good that, if it is a bug, Apple will fix it in the next release, or if it is not a Safari bug, an Apple engineer will give you a clue as to what you did wrong.

jQuery Mobile website is strangely magnified in Opera Mobile 10 despite 100% zoom level

I've developed a mobile website based on jQuery Mobile. Everything works on my own Windows Mobile device with Opera Mobile 10, but a customer of mine always sees the page magnified.
I thought that he might have a zoom setting >100% in Opera Mobile, but he claims that this is definitely not the case.
The same problem also occurs on the jQuery Mobile test site ( http://jquerymobile.com/test/ ) . Here's a screenshot of the site as displayed on my customer's device:
Any idea what might be going wrong here? I was unable to reproduce this problem on my own device or in an emulator.
My customer's device is a HTC HD2 runing Windows Mobile 6.5 and Opera 10.
Thanks,
Adrian
I'll just paste the answer by David Storey which was made for this on Opera Dev forums. It is not specifically about the 100% issue, but there might be similar issues related to the viewport tag issue, for people getting across it.
Opera Mobile assumes that any document
with a mobile specific doctype, such
as XHTML Mobile Profile or XHTML Basic
are designed and optimised for mobile,
while documents with a regular doctype
are not optimised for mobile
generally. Thus if there is a desktop
doctype the overview mode is enabled,
which you can control with the
viewport meta element. If there is a
mobile doctype the overview mode is
disabled and a regular 1:1 viewport is
used.
There were some bugs in the viewport
meta element support in Opera Mobile.
They should be fixed in the latest
version.
Did you try adjusting the scale?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
You should use xhtml mobile doctype
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Try adding <meta name="viewport" content="width=device-width">. Opera seems to behave better when it's there.
If that doesn't work, please file a bug report https://bugs.opera.com/wizard/.