Opera Mini Browser Detection Using Javascript

Question

I have written a javascript code for my website to detect if its running on an Opera Mini browser on mobile devices. Since Opera Mini has a data saving feature, when it is enabled it sometimes doesn't load the site properly, hence I want to display a message by detecting whether the browser used is Opera Mini.

The code posted below works perfectly for Opera Mini on iOS but it doesn't work on Android. Any suggestions to make the code also work for Opera Mini on Android?

<script type="text/javascript">
 function o(){
   var isMobile = {
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
                      },
                  };
     if( isMobile.Opera() ) alert('If you are using Opera Mini please disable Data Savings Mode to Have a pleasant browsing experience :)');
             }
 window.onload = o;
</script>

Wouldn't it be better to figure out why the site isn't loading properly and fix that issue? — Jeremy J Starcher, Apr 15 '16 at 17:23
@JeremyJStarcher When Data Saving mode is enabled the website is sent to opera's servers where the site is compressed and then sent back to the requesting browser, the resulting site will load in a completely different manner. — Adhip Rebello, Apr 15 '16 at 17:27

score 5 · Accepted Answer · answered Apr 15 '16 at 17:29

Never heard of Opera Mini before, but I did google for it and found https://dev.opera.com/articles/opera-mini-and-javascript/. Basically, she is using the user agent string to determine if it's opera mini by

var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);

which is very similar to your method.

However, she also suggests that you can use the window object to determine this. "Opera Mini also includes an operamini object as a property of the window object. To check for the presence of this object, use the following code."

var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]"

If you still can't get it to work, I would propose another approach to this. Approach this problem by trying to save using the saving feature, and if it fails, use the whatever fall back saving feature you intend to use. Therefore, whenever it's opera mini, it would be able to use the data saving feature, but when it isn't opera mini, it would use the alternative feature. Think of a try/catch here. Of course, you would want to consider the implementation when retrieving the saved data as well.

Michael McGinnis · Answer 2 · 2017-10-21T10:39:49.783

I'm dealing with the same challenge of detecting whether the browser is implementing data saving mode by using a proxy server, but that would include more than Opera Mini in Extreme mode. It would include UC Browser Mini for Android in Speed Mode (very popular in China, India and Indonesia) and Chrome for Android's Data Saver mode. Fortunately, this mode can now be turned off on all three browsers - though many people in the developing world can't afford to, which is probably why the option is so popular.

Dean Hume gives an example of how to detect if the user has turned data saver mode in any browser. But to get those request headers, you would need to use server side scripts, or in his example, a service worker, but not traditional Javascript.

This answer explains how to detect UC Browser Mini in Speed Mode.

Tiffany Brown's article on Dev.Opera, which @Jared Drake cited, does reluctantly recommend browser detection for Opera rather than feature detection. As Jared mentioned, you could use:

 var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);

 var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]"

But she lists some unsupported browser events that maybe you could sniff for, such as mousemove or scroll. And she has written a whole article on Viewing and Exporting Source in Opera Mini. She points out that Opera Mini, at least with the Extreme Data Saver mode, is actually displaying OPML instead of HTML.

Thankfully, Opera Mini offers the ability to inspect the current DOM tree as rendered by Opera's proxy servers. Enter server:source in the Opera Mini address bar to view the source of the currently loaded page.

You might see something in that source that would help your detection, though I didn't see it in mine.

score 0 · Answer 3 · answered Nov 16 '18 at 04:26

0

My solution is mostly a simplification of what's proposed already, tested on real device.

Detecting Opera Mini is as simple as this:

if(window.operamini) { /* do something */ }

or

isoperamini = !!window.operamini;  // returns true or false

answered Nov 16 '18 at 04:26

j.j.

1,914
15
12

Opera Mini Browser Detection Using Javascript

3 Answers3

Linked