HEYGB.COM

CSS Supporting Mobile Browsers

Today we are going to discuss about mobile browsers which supports CSS and there feature. It really must have knowledge if you are in touch with CSS and mobiles. When we learn any concept we must know the things very clearly. However it’s my views and I don’t impose it on anyone. This list is not exhaustive, but it should give you an idea of the state of mobile browsers.

Opera Mobile

* One of the most popular and common handheld browsers. Installed by default on a very high number of phones and PDA’s.
* Has a very high level of CSS support.
* Uses handheld media, if you specifically target handheld media (so you must actually say ‘handheld’, and not ‘all’).
* Supports media queries.
* Uses screen media if handheld media is not specifically targeted. The page will then be reformatted to fit the screen, so very little of the CSS will actually be used.
* Allows the user to disable reformatting if they want to, so they can see the page rendered as if it were on a desktop.
* Will not use handheld media on high resolution devices, but can still be targeted using media queries.
* Can be treated as a handheld browser.

Opera Mini

* One of the most popular and common handheld browsers. Installed by default on several phones.
* Designed to run on devices with the smallest screens and lowest capabilities.
* Has a very high level of CSS support in Opera Mini 4 on high capability devices.
* Uses handheld media, if you specifically target handheld media (so you must actually say ‘handheld’, and not ‘all’).
* Supports media queries.
* Uses screen media if handheld media is not specifically targeted.
* In Opera Mini 4 on high capability devices, tries very hard to behave like it is on a desktop (including using a virtual screen width), using a mouse. Text will be wrapped (and their containers extended as needed) to make the text fit the width of the screen.
* In Opera Mini 3-, or in Opera Mini 4 on low capability devices, or in Opera Mini 4 on high capability devices if the user has chosen the option, the page will then be reformatted to fit the screen, so very little of the CSS will actually be used.
* Can be treated as a handheld browser.

NetFront/Blazer

* One of the most popular and common handheld browsers. Installed by default on a high number of phones and PDA’s.
* Has a reasonable but not good level of CSS support.
* Uses screen media, and cannot be targeted using CSS media types. The page will then be reformatted to fit the screen.
* Some special custom versions use only handheld media, and will ignore any stylesheets that do not specifically target it, meaning that most pages remain completely unstyled. They also ignore images on many pages. However, these versions are not very common.
* Has a broken implementation of @media rules; it often applies styles from any media type (such as print media), ignoring the media declaration.
* Allows the user to disable or alter reformatting if they want to, so they can see the page rendered as if it were on a desktop.
* Should be ignored as a handheld browser. Treat it as a desktop browser, and hope that its reformatting can be adapted by the user into something readable.