return to list of articles

Developing with Opera Mini in mind

Opera Mini has over 50 million users, but the browser can bite you in the ass as a developer.

Opera Mini

I can’t remember the exact stats but Opera Mini has over 50 million users across the world. The browser is used on really old low-end phones, and serves up the internet via compressed webpages that are stripped of most interactivity, styles and JavaScript features. It’s an amazing tool for people in third-world countries, but it can be a pain in the ass if you’re a web developer.

Testing

A word on testing, don’t do it on an emulator. Spend R300 ($30) and get yourself an old Nokia C1 or a Samsung GT and test in the real world.

Form issues

One issue you may encounter is that when you input text into a form and press enter/done/etc. the page could reload before you’ve even hit the submit button. Sometimes it will clear the form out. On a multi-input form page, this can be very frustrating. The reason for this is that JavaScript isn’t run in the browser but is processed on Opera’s servers so it needs to send the state of the page to the server after every interaction to handle it. If you have any onfocus events or bindings, or any ajaxy business happening with your forms (like using Twitter’s Typeahead library) then you’ll want to disable this.

You can do so by using JavaScript like the following to unbind a focus event:

if ( window.operamini ) {
  $('input[type="text"]').unbind('focus');
}

I use Typeahead on a search bar with placeholder, focus, and blur options, that loads on every page so I’ve added this to only enable the library if the browser isn’t Opera Mini. It’s probably not great JavaScript but it works. Improvement suggestions are welcome.

if ( window.operamini ) {
  $('input[type="text"]').unbind('focus');
} else {
  $('#main_search').typeahead([etc]);

Font-Awesome

Opera Mini also won’t load Font Awesome icons so I have created a helper for my Ruby on Rails application:

def is_opera_mini
  agent_strings = /Opera Mini|Opera Mobi/
  if request.env['HTTP_USER_AGENT']
    if request.env['HTTP_USER_AGENT'] =~ agent_strings
      true
    else
      false
    end
  end
end

Then I just use it in the views like so to display Font Awesome icons on all browsers that aren’t Opera Mini:

<% unless is_opera_mini %><i class="icon-search"></i><% end %>

That’s all

These are just two tips, I’ll probably update this post and add more as time goes by but I’m in a rush. Hope this helps you.



Discussion on Hacker News

Get notified when Pawel releases new posts, guides, or projects