Differences between Opera Mini 3 and 4
DEPRECATED: This article is deprecated, and a newer article with updated information is available at A developer’s look at Opera Mini 5. You should read this one if you want updated information on the latest version of Opera Mini.
Introduction
Opera Mini 3 was a highly successful mobile browser because of it's unique features, and also the unique way in which it uses a server farm to load up your pages for you and compress them before sending them to your device, meaning a faster, less costly experience that still gives you the full web on your phones, ever low powered ones. Opera Mini 4 builds on this with more great features and improved standards support, but what exactly are the differences?
In this article I provide a guide to the differences between the two versions. It is mainly geared towards developers wanting to make sure that their sites will still run on both versions, but I have also included a round up of the main new features the browser itself provides..
New features
This section lists the main new features introduced in Opera Mini 4, which will tempt users to make the upgrade.
Integration with Opera Link
Opera Mini is integrated with Opera Link, an exciting new service allowing you to keep all your bookmarks in sync between Opera Mini, Mobile, Desktop, and on games consoles.
Better navigation with virtual mouse and power scrolling
Opera Mini allows you to navigate around web pages much faster by using your joystick/stylus to move the virtual mouse around to select different page items (it snaps to nearby links etc.)
Keystrokes
While using Opera Mini 4 you can use various keyboard shortcuts to speed up using the interface, for example 1 will open up the context menu where you can reload the page, turn images off before you navigate to a new URL, and more.
View Pages in Landscape mode
If you want a widescreen view of the web, you can hit * # to rotate the screen through 90 degrees and browse in Landscape mode. This can also be changed to the default setting if you wish.
Optimized for Blackberry Users
Opera Mini 4 offers "native BlackBerry menus" designed to invoke the same user-interface Blackberry users are used to on their Blackberry devices, giving them a better experience.
Identification using the user agent string
Unsurprisingly, the user agent has changed between Opera Mini 3 and 4. The Opera Mini 3 UA string looked like this:
Opera/8.01 (J2ME/MIDP; Opera Mini/3.1.8295/1724; en; U; ssr)
Whereas the Opera Mini 4 string now looks like this:
Opera/9.5 (J2ME/MIDP; Opera Mini/4.0.xxxx/8; U; en)
You'll notice that it is based on the same core engine as Opera 9.5, whereas Opera Mini 3 was based on Opera 8.01.
Rendering Modes
Opera Mini 4 has two rendering modes:
- Small screen rendering mode (mobile view) - the default on phones with screens less than 128 pixels in width, this mode reformats the page and then displays it in one small column, with no scrolling necessary. This is good for small screens, where all the scrolling would be potentially confusing and laborious, but it does mean losing a lot of formatting, such as CSS positioning
- Desktop rendering - the default on phones with screens over 128 pixels in width, this mode displays the full page how it was originally intended, from a heavily zoomed out view. You can then select a position to zoom in to view the full-size content. When zoomed in, you can scroll around the page
Supported image formats
Opera Mini 3 and 4 basically support similar image formats, as both the core rendering engines they are based on have good image support, including PNG, JPEG, GIF (but not animated GIFs,) BMP, ICO, TGA and WBMP.
There are two different image settings available in Opera Mini - low quality, which reduces the image quality to save bandwidth, and high quality, which downloads the full image. The default is low, but the user can change this in the settings menu.
Standards support
At this point in the article, we've explored some of the new features Opera Mini 4 provides that weren't present in 3, and also looked at some of the technological differences. Now we turn our attention to web standards support, and how that differs between versions. It is inevitable that there are some differences, as 4 is based on a different core rendering engine to 3, but the differences will certainly be to your liking, I can promise that. For more on standards support in Opera Mini 4 and general development tips, see our article on Designing pages with Opera Mini 4 in mind.
HTML
Opera Mini 3 didn't support tables, underlining/strike-through/overlining, strong/emphasis, blockquotes, heading levels, del/abbr/acronym, lists, tables, and blink and marquee.
The good news is that Opera Mini 4 does support all of these (except blink
and marquee
!), for example h1
to h6
are displayed properly, and strong
and em
work as expected.
Tables work fine, even down to th
producing headings, although tables containing more than about 2 columns won't look very good in mobile view.
The full complement of lists are supported - ordered, unordered, and definition.
CSS
CSS support is vastly improved in Opera Mini 4 over Opera Mini 3, again because of the change in rendering engine. Opera Mini 4 basically supports all the CSS that Opera 9.5 desktop (Kestrel) does, including CSS 3 features such as selectors, media queries and text-shadow
(although text-shadow
support is only partial - Mini 4 does not support blurred text shadows).
Opera Mini 4 also supports borders and background images.
Another big change with Opera Mini 4 is how it handles the handheld media type and media queries. This is discussed next.
Media types and media queries
Opera Mini 3 supports the handheld
media type, as does 4, but 3 supports handheld
by default, whereas 4 uses the screen
stylesheet by default in desktop rendering mode, and allows users to switch to small screen rendering mode/mobile view to use the handheld
stylesheet.
This decision was made because even though handheld
is designed for mobile devices, it is rather restricting - Mini can handle most desktop web page content pretty well (although there are some scripting caveats, as mentioned below) so it is unfair to lumber it with low-fidelity handheld styling, when it could handle the main stylesheet. The styles used in the stylesheets are of course down to you as designers and developers, but a lot of web folk tend to offer a really low style experience in their handheld
stylesheets. The way Opera Mini 4 does it gives users an immediate better-looking experience, while at the same time allowing them to choose the handheld styles or SSR if they wish.
Opera recommends media queries as a better way of tailoring styling to different devices, allowing iterative changes in style based on important factors such as browser window width. For example you could have one block of styles that will apply a good 2 column layout to all browsers, then a block of styles inside a media query that will reduce the heading sizes and change it to a single column layout if the browser window is less than 480 pixels wide - genius!
In the real world, using media types and queries does have issues due to browser support, and a combination of both is in fact needed to ensure reliable support in most browser. These issues are discussed further in our article on How to serve the right content to mobile browser.
JavaScript
The basic story in Mini 3 and 4 is that JavaScript is very limited on the client - background scripts will fail, there is limited support for DOM events, and very limited Ajax support. JavaScript executed on the server however will work fine. Mini 3's client-side JavaScript support was even more limited than the list you see below; fortunately Mini 4 has expanded it's support a bit.
The supported events are as follows (bear in mind that Event handlers using the 'this' keyword on elements other than form controls will fail, for example <a href="http://labs.opera.com" onclick='window.location = this.href'>
):
- Loading: normal event processing is done for
onLoad
andonUnload
. - Forms:
onSubmit
onChange
: this even works during filling out a form, not just on submitting the entire form. For example, if you have 2 form fields, "Select Country" and "Select State/Region," and the second one changes depending on the country you selected in the first one, Opera Mini will reload to display this changeonClick
on buttons (bear in mind that events will only be fired when the form is finally submitted, not while it's being edited in the client, thereforeonFocus
would not work)
- Clicks:
onClick
is implemented as a mouse motion to the coordinate being clicked (onMouseEnter
,onMouseOver
,onMouseLeave
etc) followed byonMouseDown
followed byonMouseUp
and finallyonClick
.
All other events are ignored/not applicable, for example:
- key/mouse events (
onMouseOver/-Out/-Down/-Up
,onKeyDown/-KeyPress
) - focus events (
onBlur
,onFocus
, as mentioned above)
document.write()
function is also supported, and pop-ups are either blocked or replace the original document.
For more details of JavaScript support in Mini 4, see my JavaScript support in Opera Mini 4 article.
Summary
In this article we have covered the differences between Opera Mini 3 and Opera Mini 4, from a developer's point of view. This should be useful to anyone actively developing web content with mobile devices in mind, to see what issues there are to be aware of when making sure sites will work in both Opera Mini 3 and 4, and upgrading your knowledge.
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Comments
The forum archive of this article is still available on My Opera.